[英]Vertically center align a div within anothe div
说我有
<div id ="outer" class="outer">
<div id= "inner" class="inner">
//some stuff
</div>
</div>
内部div具有动态高度,它随div内部的高度而变化。 外部div只是一个设置为具有窗口高度的容器。
我想将其设置为使内部div在外部div内垂直居中。 有没有一种方法可以在CSS中轻松完成此操作,或者需要JavaScript?
我发现的解决方案:
var container= document.getElementById("outer");
var inner= document.getElementById("inner");
var inHeight=inner.offsetHeight;
container.style.height=(window.innerHeight-10);
container.style.width=window.innerWidth;
var conHeight=container.offsetHeight;
inner.style.marginTop=((conHeight-inHeight)/2);
如果其他人正在寻找解决同一问题的方法,这对我很有用。
强调文字
试试这个http://jsfiddle.net/gLChk/12/
但IE <8浏览器将不支持它。 为了使其在所有浏览器上都能正常工作,您必须编写一个js,以查找.inner的高度并应用这些CSS属性
$(document).ready(function(){
var inner = $('.inner'),
ht = inner.height();
inner.css({'position':'absolute','top':'50%','margin':-ht/2+'px 0 0 0'});
});
希望这可以帮助。 :)
.outer {
display: table;
position: relative;
width:100%;
height:200px;
border:1px red solid;
}
.inner {
display: table-cell;
position: relative;
vertical-align: middle;
}
采用:
.inner
{
margin-top:auto;
margin-bottom:auto;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.