html - 如何使用 CSS 将文本垂直对齐到彩色 div 中？

Question

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

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

如您所见，我有一个包含文本的 #titleBox div:促进农业投资

#titleBox 的特定高度为 40px。我想以居中的方式垂直对齐绿色 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;
}

我需要做什么来解决？

谢谢

安德里亚

Answer 1

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

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