當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

回答

相關問題