当div的高度不固定时div无竖直居中div

我想垂直居中没有JavaScript的div其高度不固定。当div的高度不固定时div无竖直居中div

我发现here一个想法。

我不知道是否有其他解决方案来解决这个问题。

来源

2012-01-25 Misha Moroshko

这工作：

这里的链接：http://jsbin.com/uvodop/2/edit

见它是如何垂直盒子内对齐。身高也是不固定的。

希望它回答你的问题。

<html> 
<head> 
    <title>HTML Div vertical align using CSS</title> 
    <style type="text/css"> 
     .outerDiv { 
      border: solid 1px #000000; 
      width: 300px; 
      padding: 5px 2px 5px 2px; 
     } 

     .innerDiv { 
      width: 95%; 
      margin: 0px auto; 
      padding: 40px 0px 40px 5px; 
      border: solid 1px #000000; 
     } 
    </style> 
</head> 
<body> 
    <div class="outerDiv"> 
     <div class="innerDiv"> 
      This text is placed inside the next HTML div tag.<br /> 
      CSS style is used to vertical align the nested div and text. 
     </div> 
    </div> 
</body> 
</html>

来源

2012-01-25 04:20:16

它不工作，如果outerDiv的高度是固定的，比如700像素。 –

好吧，我解决了它...如果你想它动态改变我想你可能需要JavaScript ... http://jsbin.com/uvodop/2/edit –

虽然这是一个古老的线程，我认为这个答案可能有助于某人。如果IE的版本灵活到至少IE> 8，那么您可以使用display:table-cell并使用默认的vertical-align功能。

在下面的代码中，div.hover即将垂直对齐的div的中间没有分配任何高度，但是父级被分配了100％的高度以填满屏幕。

检查了这一点

.outer { 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #aaa; 
 
    display: table; 
 
} 
 
.inner { 
 
    display: table-row; 
 
    border: 1px solid #0f0; 
 
    height: 100%; 
 
} 
 
.center { 
 
    display: table-cell; 
 
    border: 1px solid #00f; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
} 
 
.hover { 
 
    width:100px; 
 
    border: 1px solid #f00; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <div class="center"> 
 
     <div class="hover"> 
 
     I am a random text to give the div some height 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2015-04-10 18:25:01 Lordbalmon

当div的高度不固定时div无竖直居中div

回答

相关问题