Question

你好我的vertical-align：middle;

有问题

.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的垂直中心。请帮助我。抱歉我的英语不好。

Answer 1

作为替代方案，您可以使用transform的translateY方法，例如

transform: translateY(-50%);

在这里工作：http://jsfiddle.net/r5z8gjgu/embedded/result/

Answer 2

如果我理解正确，你想要这样的东西

.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>

希望有所帮助。

Answer 3

看了你的问题之后，我很好奇，快速谷歌搜索已经从stackoverflow给了我以下内容：

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 {       display：inline-flex; ＆lt; ==这负责垂直对齐       身高：400px;       背景颜色：红色;       白颜色; }

.innerDiv {       保证金：auto 5px; ＆lt; ==这负责垂直对齐       背景颜色：绿色; .innerDiv类margin必须是margin：auto * px;

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

显示：最新支持inline-flex属性（更新/当前   版本）支持HTML5的浏览器。

始终尝试定义垂直对齐div的高度（即innerDiv）   任何进一步的兼容性问题。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

   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>

Answer 5

vertivcal-align与table-cell一起使用。看看它在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;
}

你也可以通过＆＃34; relative＆＃34;来实现这个目标。和＆＃34;绝对＆＃34;位置

.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;
}

div中的div垂直中间

5 个答案: