So I have a bunch of elements that need to have a specific width, height and padding and need to be centered within their parent element:
<div class="pages">
<a>Page 1</a>
<a>Page 2</a>
<a>Page 3</a>
</div>
How do I do this? I don't know how many elements there will be so .pages can'开发者_JS百科t have a defined width so margin:auto; won't work.
In the stylesheet or style tag:
margin-left: auto; margin-right: auto
You can wrap all those in one single div and center this one, this will be the usual approach I believe.
<div id="wrapper" style="margin-left:auto; margin-right:auto">
<div id="page1"> ... </div>
<div id="page1"> ... </div>
...
</div>
If you have working code, please post it.
It sounds like what you're looking for is margin: auto
on the elements you want to center, like so:
#my_div {
margin: auto;
}
CSS CODE
div {
display:table-cell;
width: 200px;
height: 200px;
vertical-align:middle;
background: red;
}
HTML CODE
<div>
Hello...This is Vertically Centered!
</div>
<div>
Hello...2!
</div>
<div>
Hello...3!
</div>
SAMPLE DISPLAY
精彩评论