Update margin: auto when div resizes
is it possible to center a div inside a div so that when the parent div resizes, it stil开发者_如何学JAVAl stays in the center? So far, I tried
margin:0 auto; and margin-left: auto; margin-right: auto;
Both work, however it does not reposition once a div size is changed. Thank you :))))
markup:
<div id='bottomcontent' style="float: left; position: absolute; left: 0; bottom: 0; background-color:#0b0b0b; height:100px; width:796px;">
<div id="bottomleftbutton" style="margin-left: 25px;">stuff here </div>
<div id="bottomcentertext" style="margin-left: auto; margin-right: auto;">so far
<h4>17</h4>
places match your criteria</div>
<div id="bottomrightbutton" style="float: right; margin-right: 25px;">stuff here </div>
</div>
In order for your margin:auto;
to work, you need to set a width on the div
.
So if you did something like this
<div id="bottomcentertext" style="
margin-left: auto;
margin-right: auto;
width:300px; //NEW
color:white;">
it works.
Example: http://jsfiddle.net/jasongennaro/j96ft/
Style the inner div with this:
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
See an example here: http://jsfiddle.net/2K4Gp/
精彩评论