css - 如何垂直居中这个跨度等于 h1

Question

到目前为止我已经明白了:

Jsfiddle

如何更改 span 的 css，使其垂直居中于其左侧的 h1？

希望不要太复杂!

Answer 1

最好的选择是使用 Flex 样式。

1. 删除“.title i”、“.title span”、“.title h1”的所有样式
2. 修改标题如下:

Flex 标题样式:

.title {
    width: 100%;
    margin: 30px auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

调整内容:居中； - 这会在中间重新对齐您的 H1、破折号和跨度。

对齐元素:居中； - 这为您提供了垂直对齐方式。