Question

我想将一些文本置于固定高度div中。

我做了以下fiddle

<div style="height:180px;border:1px solid black;vertical-align:middle;">
     <h1 style="vertical-align:middle;">Contact</h1> 
</div>

<div style="height:180px;border:1px solid black;vertical-align:middle;">
    <h2>Welcome to the</h2>
    <h1>AAA</h1>
    <h4>system</h4>
</div>

我尝试过vertical-align的各种选项：将它应用于不同的元素，但它似乎不起作用。

我确实看到其他问题，其中行高设置为与字体大小相同的高度，但在第二个示例中，我有多行不同高度的文本。

有没有好办法呢？

Answer 1

用于display table-cell

就像这样

.parent{
    height:180px;border:1px solid black;vertical-align:middle;
    display:table-cell;
}

Demo

不使用inline css在external css和define css

中撰写课程

Answer 2

垂直对齐总是带来一些麻烦。您应该仅将css属性应用于table（td）元素和内联元素，而不是像div这样的块元素。

要在中间定位某些东西，您可以使用非常简单的解决方案 - 使用绝对定位。

创建子块并将其位置设置为绝对值，将其从顶部移动50％，并将margin-top设置为负值，其中amout等于父级高度的一半。将父母的位置设置为亲戚。

#parent {
    position: relative;
    height: 180px;
}

#child {
    position: absolute;
    top: 50%;
    margin-top: -90px;
}

<div id="parent">
    <div id="child">
        <h1>sample</h1>
        <h2>sample</h2>
    </div>
</div>

固定高度div中的中心文本

2 个答案: