css - Make div to stay in the container -


i want put button on image, if image have < height id="addgravity" top:-300px, button go out container.

<div class="item">     <img src=""/><hr style="position: relative;top:-20px;"/>     <div id="addgravity" style="position:relative;top:-300px;background:white;     height:56px;color:white;opacity:0.9;"class="item">button</div> </div> 

you're making difficult using negative margins position things. why not position 'button' absolutely stays aligned in middle regardless of image size?

.item {      display:inline-block;      position:relative;  }  #addgravity {      position:absolute;      top:0; right:0; bottom:0; left:0;      background:white;      height:56px;      color:black;      opacity:0.9;      margin:auto;  }
<div class="item">      <img src="http://www.placehold.it/300" />      <div id="addgravity">button</div>  </div>


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -