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

最重要的部分 - 我想垂直对齐该标题旁边的箭头。在左侧图像上（现在是如何），您可以看到它是底部对齐的，看起来不太好看。
（可选）这是一个更广泛的问题，我想我会发现我无论如何都需要第一部分的帮助......有什么我可以做的，使箭头和标题看起来更好？也许是一种不同的字体，或者其他文字技巧，这会让它看起来更好看？关于它如何看起来现在似乎对我来说很平淡，但我不知道如何改善它。

这里是我的代码（基本主题是引导）：

<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>

这里的视觉引导：

Example

干杯

来源

2015-04-08 b85411

将标题的内容用''这样的内联级包装器包装起来，并将'vertical-align：middle'应用于标题的子代：http://jsbin.com/wecoju/1/edit?html ，CSS，输出 –

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

新增CSS

h3 span { 
vertical-align:middle; 
}

来源

2015-04-08 09:10:17

当你有一行文字不能拉伸多行，并且你有一个固定的父元素高度。

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

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

否则您可以使用flexbox并设置align-items：center; y轴的父元素上的属性和justify-content：center;对于x轴，为。

来源

2015-04-08 09:20:35

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

回答

相关问题