Verticaly Center在Bootstrap中使用右拉类对齐元素

Question

HTML代码：

<h5>
<span style="vertical-align:central"><i class="fa fa-angle-right pull-right" style="font-size: x-large;"></i></span>
<img src="/myimage.jpg" /><span style="padding-left: 1em"></span>
<b>  Item 1 - Item 2 </b> <br />
<span style="font-size:small;padding-left:4em">StatusColourCode</span>
</h5>

如何根据fa fa-angle-right pull-right元素使具有h5类的span元素垂直居中？

我试过了style="vertical-align:central"但是没有用。

Screenshoot：

Answer 1

vertical-align应为middle而不是central，应该应用于图片

Answer 2

要将div中的元素垂直居中，除非div是表格，否则不能use vertical-align:middle。要做到这一点，你只需要CSS3转换和CSS定位。这是代码：

div{
  position: absolute;
  top: 50%;
  transform: translateY(-50%); 
}

希望它有所帮助。

Answer 3

通过添加行高行高：3em

解决了这个问题

<h5>
<span style="vertical-align:central"><i class="fa fa-angle-right pull-right" style="font-size: x-large;line-height:3em"></i></span>
<img src="/myimage.jpg" /><span style="padding-left: 1em"></span>
<b>  Item 1 - Item 2 </b> <br />
<span style="font-size:small;padding-left:4em">StatusColourCode</span>
</h5>