页面中间的标签垂直对齐不起作用

Question

这是我将文本放在页面垂直中间的小提琴。

小提琴

.HTML：

<label class="label"> Should be in middle </label>

.CSS：

.label{
    vertical-align: middle;
}

但它并没有把它放在中间

Answer 1

你去吧。

工作演示

该 HTML 代码：

<label class="label"> Should be in middle </label>

CSS代码：

    .label{
    vertical-align: middle;
    background:#f0f0f0;
    display:inline-block;
    width:100%;
    text-align:center;
    height:150px;
    line-height:150px;
}

希望这就是你要找的。

PS：高度和行高值应该相同才能工作。你可以输入任何值，但为了说明目的，我使用了 150px

Answer 2

像这样

演示

.css

div{
    background-color:red;
    display: table; vertical-align: middle;
    width:500px;
    height:500px;
}
label{
display: table-cell;
    vertical-align:middle;
    text-align:center;
}

Answer 3

您的标签是正文中的only-child。正文高度由标签高度设置，因此您编写代码尝试将文本设置在单行文本的中间。它做到了，而且工作正常。

如果要在中间设置单行文本会更好使用line-height css属性：

<div style="height: 30px;line-height: 30px;">Some text</div>

Answer 4

试试这段代码

.label{
text-align:center;
margin:0px auto;
display:block;
width:100%;
height:100%;
padding:0;
vertical-align:middle;
} 

检查这个小提琴

小提琴

Answer 5

我想很难

从这一小段代码中说出来。但我认为问题是，如果您希望标签垂直对齐，则必须将类设置为包含标签的元素。像这样，即：

    <div class="label">
        <label>Middle</label>
    </div>

.css：

    .label
    {
        vertical-align: middle;
    }