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