如何使用 CSS 将文本垂直对齐到彩色 div？答案

【问题标题】：How to vertically align the text into a coloured div using CSS?如何使用 CSS 将文本垂直对齐到彩色 div？
【发布时间】：2013-09-07 02:49:34
【问题描述】：

我需要将文本垂直对齐到具有一定高度的 div 中。

如果你去这里你可以看到我的问题：http://onofri.org/example/example3/

如您所见，我有一个 #titleBox div，其中包含以下文本：促进农业投资

#titleBox 的特定高度为 40 像素。我想以居中的方式垂直对齐绿色 div 中的文本。

这是我的 HTML 和 CSS 代码，但效果不佳：

<div id="container">


    <div id="titleBox">
        <p id="myTitle">Promoting Investment in Agriculture</p>
    </div>


</div>

#titleBox{
    margin: 0 auto;
    width: 350px;
    background-color: #6da662;
    height: 40px;
    vertical-align: middle;
}



#myTitle{
    /* consente di posizionare un elemento al centro del suo contenitore */
    margin: 0 auto;
    overflow: hidden;
    color: #fff;
    font-size: 16.5px;
    font-weight: bold;
    text-align: center;
}

我要解决什么问题？

Tnx

安德烈亚

【问题讨论】：

标签： html css layout xhtml

【解决方案1】：

尝试将这些样式添加到#myTitle：

vertical-align: middle;
line-height: 40px;

【讨论】：

哇似乎工作正常！我还尝试添加垂直对齐：中间； #myTitle 上的属性，但我没有使用 line-height 属性。为什么使用它有效？究竟是做什么的？ Tnx 这么多

【解决方案2】：

这是另一种解决方案 - 将这些样式添加到您的页面。您绝对应该熟悉用于垂直居中的 display:table-cell 属性。

#titleBox{
    display:table;
}

#myTitle{
    display:table-cell;
    vertical-align: middle;
}

【讨论】：

值得注意的是，为了水平居中#myTitle，您需要带有display: table 的父容器，因为margin: 0 auto 将使表格单元格居中。对于垂直居中，表格单元格比行高技巧更通用，尤其是对于多行文本。演示地址：jsfiddle.net/audetwebdesign/MUXEd

【解决方案3】：

如果您想真正简洁，可以在一个元素中完成所有操作：

<div id="titleBox">Promoting Investment in Agriculture</div>

并应用以下 CSS：

#titleBox {
    margin: 0 auto;
    width: 350px;
    background-color: #6da662;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16.5px;
    font-weight: bold;
}

见小提琴：http://jsfiddle.net/audetwebdesign/2PxsZ/

【讨论】：