如何将元素相对于标题居中？

Question

<header>
    <h1><a href="/">Blog</a></h1>
</header>

h1无法与vertical-align垂直居中，如果我应用保证金，则相对于页面而不是header。

Answer 1

vertical-align适用于内联元素或表格单元格。 h1默认为块。您可以做的是将标题的行高设置为与高度相同。这是一个例子：

＆＃13;

＆＃13;

header {
  background-color: red;
  height: 150px;
  line-height: 150px;
}

a {
  text-decoration: none;
}

＆＃13;

<header>
    <h1><a href="/">Blog</a></h1>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用此：

h1:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

Answer 3

你也可以使用flex来做这个例子。

header{
display:flex;
width:100%;
height:150px; 
background-color:#0077dd;
color:#fff;
    align-items: center;
}

<header>
<div class="element">This is element</div>
</header>

如果您需要水平示例，这是唯一的垂直示例。