0

我需要将文本垂直对齐到具有一定高度的 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;
}

我要解决什么问题？

肿瘤坏死因子

安德烈亚

4

3 回答 3

2

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

#titleBox{
    display:table;
}

#myTitle{
    display:table-cell;
    vertical-align: middle;
}
于 2013-09-03T19:12:57.393 回答
2

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

vertical-align: middle;
line-height: 40px;
于 2013-09-03T19:06:10.917 回答
1

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

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

于 2013-09-03T19:13:19.993 回答