开发者

align block level element vertically with horizontal width 90%

开发者 https://www.devze.com 2023-03-10 14:30 出处:网络
Ok I can align a content both horizontally and vertically using this <div id=\"centerId\">...content</div>

Ok I can align a content both horizontally and vertically using this

<div id="centerId">...content</div>

#contentId {width: 300px; height: 200px; position: absolute; left: 50%; margin-left: -150px; top: 50%; margin-top: -100px; }

Now how to align if I开发者_如何学运维 want width to be 90% of the container in which #contentId is.


I usually use two ensted divs as follows...

<div style="display: block; height: 100%;  width: 100%; position:relative; overflow: hidden;margin: 0px auto;">
 <div style="position: absolute; top: 40%;left:0px;display: table-cell; vertical-align: middle;text-align:center;">
    Content Here...
 </div>
</div>

The trick here is the

display: table-cell

Give it a try :D

0

精彩评论

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

关注公众号