开发者

Update margin: auto when div resizes

开发者 https://www.devze.com 2023-04-04 06:15 出处:网络
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

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/

0

精彩评论

暂无评论...
验证码 换一张
取 消