2

我想将一些文本居中在一个固定高度的 div 中。

我做了以下小提琴

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

我已经尝试了垂直对齐的各种选项：中间将它应用于不同的元素，但它似乎不起作用。

我确实看到了其他问题，其中 line-height 设置为与 font-size 相同的高度，但在第二个示例中，我有多行不同高度的文本。

有没有好的方法来做到这一点？

4

2 回答 2

6

曾经display table-cell

像这样

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

演示

不要用来在and中inline css写一个类external cssdefine css

于 2013-05-08T10:30:07.807 回答
0

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

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

创建子块并将其位置设置为绝对位置，将其从顶部移动 50%，并将 margin-top 设置为负值，数量等于父块高度的一半。将您的父母位置设置为相对。

#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>
于 2013-05-08T10:28:07.750 回答