使用垂直对齐CSS使导航链接看起来更好

Question

我的问题分为两部分。

1. 最重要的部分 - 我想垂直对齐该标题旁边的箭头。在左侧图像（现在的样子）上，您可以看到它是底部对齐的并且看起来不太好。

2. （可选）这是一个更广泛的问题，我认为无论如何我都会看到我需要第一部分的帮助......我能做些什么来使箭头和标题看起来像更好？也许一个不同的字体，或其他一些文字技巧，使它看起来更好？关于它看起来现在的样子对我来说似乎很平淡，但我不确定如何改进它。

这是我的代码（基本主题是bootstrap）：

<h3>
    <small><i class="glyphicon glyphicon-chevron-left"></i></small> HEADING
</h3>

<div class="alert alert-info" role="alert">
    <span>This is an example of a text information box that will appear towards the top of the page.</span>
</div>

这是视觉指南：



干杯

Answer 1

<h3>
<small><i class="glyphicon glyphicon-chevron-left"></i></small> <span>HEADING</span>
</h3>

添加css

h3 span {
vertical-align:middle;
}

Answer 2

如果您的文本行不会延伸到多行，并且您的父元素具有固定的高度。

您可以将文本的行高值设置为等于父容器的高度。这将使您的文本在y轴上居中。

垂直对齐中间只能用于表格单元格。

否则，您可以使用弹性框并在y轴的父元素上设置 align-items：center; 属性，为x轴设置 justify-content：center;