div div垂直中間

你好我有一個問題vertical-align：middle;div div垂直中間

.wp{ 
 
    width: 100px; 
 
    height: 500px; 
 
    background-color: #000000; 
 
} 
 
.sub{ 
 
    width: 100%; 
 
    height: 20%; 
 
    background-color: red; 
 
    vertical-align: middle; 
 
}

<div class="wp"> 
 
    <div class="sub"></div> 
 
</div>

我想div的女巫.SUB類將.wp DIV的垂直中心。 PLZ幫助我。對不起，我的英語不好。

來源

2014-10-30 user3083648

vertivcal對齊與工作表單元格。看看它是如何在jsfiddle工作。

這是HTML和CSS

<div class="table"> 
    <div class="tableRow"> 
     <div class="wp"> 
      <div class="sub"></div> 
     </div> 
    </div> 
</div> 



.table { 
    display: table; 
    width: 100px; 
} 

.tableRow{ 
    display: table-row; 
    height: 400px; 
} 

.wp { 
    display: table-cell; 
    background-color: tomato; 
    vertical-align: middle; 
} 

.sub { 
    height: 200px; 
    background-color: green; 
}

你也可以用「相對」和「絕對」位置

.wp{ 
    position: relative; 

    width: 100px; 
    height: 500px; 
    background-color: #000000; 
} 
.sub{ 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto; 

    width: 100%; 
    height: 20%; 
    background-color: red; 
    vertical-align: middle; 
}

來源

2014-10-30 09:32:13

如果我理解正確的話，你想是這樣的

.wp{ 
 
    width: 100px; 
 
    height: 500px; 
 
    background-color: #000000; 
 
} 
 
.sub{ 
 
    position:absolute; 
 
    top: 250px; 
 
    width: 100px; 
 
    height: 20%; 
 
    background-color: red; 
 
    vertical-align: middle; 
 
}

<div class="wp"> 
 
    <div class="sub"></div> 
 
</div>

希望有所幫助。

來源

2014-10-30 09:12:03 Aameer

看着你的問題，我很是好奇，經過一個快速谷歌搜索給我的下面已經從計算器：

Vertically Aligning Divs

http://phrogz.net/css/vertical-align/index.html

http://jsfiddle.net/ktxpP/3/

在試圖不只是提供鏈接回答：以下代碼段屬於Lalit：

您可以垂直對齊其他div中的div。爲此，您必須在小提琴上像這個例子那樣定義css。只要看看在outerDiv中垂直對齊innerDiv的小演示。

HTML

我的垂直DIV + CSS

.outerDiv { 顯示：直列彎曲; < ==這是負責垂直對齊高度：400px; background-color：red; 顏色：白色; }

.innerDiv {margin：auto 5px; < ==這是負責垂直對齊 background-color：green; } .innerDiv類邊距必須爲margin：auto * px;

[*可以是你想要的值。]

顯示：內聯-FLEX屬性在最新的（更新/電流版本）支持HTML5的瀏覽器的支持。

對於任何進一步的兼容性問題，始終嘗試定義垂直對齊div的高度（即innerDiv）。

.wp{ 
 
    width: 100px; 
 
    height: 500px; 
 
    background-color: #000000; 
 
    display:inline-flex; <-- 
 
} 
 
.sub{ 
 
    width: 100%; 
 
    height: 20%; 
 
    background-color: red; 
 
    margin:auto; <-- 
 
}

<div class="wp"> 
 
    <div class="sub"></div> 
 
</div>

來源

2014-10-30 09:20:11

this is my solution try this 
<html> 
    <head> 
    <style> 
    .wp{ 
    width: 10%; 
    height: 10%; 
    float: left; 
    background-color: green; 
    border: 1px solid #00FF 00; 
    margin: 0.5%; 
    position: relative; 
    } 
    .sub 
    { 
     width: 50%; 
    height: 50%; 
    background-color: red; 
    position: absolute; 
    } 
    .center{ 
    margin: 0 auto; 
    left: 25%; 
    } 

    .right{ 
    left: 50%; 
    } 

    .middle { 
    top: 25%; 
    } 
    .bottom { 
    top: 50%; 
    } 

    </style> 
    </head> 
    <body> 

    <div class="wp"> 
     <div class="sub center middle"></div> 
    </div> 
    </body> 
    </html>

來源

2014-10-30 09:32:12