Question

我知道如何在div中垂直对齐文本，但如果div具有百分比高度和宽度，我不确定如何做到这一点。这是我的代码：

    <div id="header">
        <h1>Home</h1>
    </div>

    #header {
        background-color: red;  
        color: white;
        text-align: center;
        vertical-align: middle;
        width: 100%; 
        height: 15%;
    }

现在，在我的网页上，div中的文本已正确对齐但不是垂直对齐。我该如何解决这个问题？您是否也可以尝试解释您的答案并尽可能简单地保持它们（我还是相对较新的HTML / CSS）。谢谢。

Answer 1

您可以使用flexbox model轻松集中内容。

只需将以下规则添加到您的容器中：

display:flex;
justify-content: center; //horizontal centering
align-items:center; //vertical centering

FIDDLE

注意这可能是一个比你预期的更通用的解决方案，但flexbox的真正酷处在于它适用于许多不同的情况，包括你的情况（例如{{1} 1}}标记here）。

Answer 2

尝试将display:inline-block提供给您的h1标签。

DEMO

Answer 3

添加与line-height容器匹配的height：

#header {
    background-color: red;  
    color: white;
    text-align: center;
    vertical-align: middle;
    width: 100%; 
    height: 15%;
    line-height: 0.15em;
}

Answer 4

你可以添加：

display:inline-block

到你的h1

示例：http://jsfiddle.net/24pwprvf/

Answer 5

根据Praveen Above的建议，你不应该使用行高来获得你想要的效果。

您可以通过以下方式获得相同的效果：＆＃39; display：inline-block＆＃39;在#header div或#header h1 css样式中。

第一部分是不可取的。最佳做法是仅在h1风格中使用它。

垂直对齐div内的文本高度和宽度百分比？

5 个答案: