时间戳

首页 > 解决方案 > 无法获得“垂直对齐：中间；” 在标题中工作

css - 无法获得“垂直对齐：中间；” 在标题中工作

问题描述

我正在尝试将我的标题垂直对齐到中间。我查找了这个问题的解决方案，但没有一个有效。垂直对齐：是否不适用于尝试垂直对齐 div 中的内联元素，例如标题？

我尝试使用 100% 宽度和 100% 高度创建一个盒子模型，或者我的 h1 所在的 div 元素的确切像素。它只是没有响应并停留在顶部。

我知道这个问题已经被问过很多次了，但是，我就是无法让它发挥作用。感谢您的时间！

<header class="main-header">
    <div id="header-title-box">
         <h1 class="header-font"> This Is My Lab Zoe! </h1>
    </div>
</header>

.main-header {
    width: 100%;
    height: 150px;
    background:#3d594b;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#header-title-box {
    display: inline-block;
    vertical-align: middle;
    border: none;
    width: 100%;
    height: 150px;
    margin: 0;
}

h1.header-font {
    height: 150px;
    vertical-align: middle;
    font-size: 40px;
    color: white;
    margin: 0;
    text-align: center;
}

标签： css

解决方案

您可以通过提供显示为表格单元格来实现垂直对齐。

#header-title-box{

`display: table-cell;`
`vertical-align: middle;`
`border: none;`
`width: 100%;`
`height: 150px;`
`margin: 0;`

}

推荐阅读