css - 垂直对齐 CSS 属性

Question

这似乎是一个非常简单的问题，但到目前为止它已经成功地难住了我。垂直对齐属性对我来说是正确的。但是，当我
在要沿图像中心运行的文本之后添加标签时，标签之后的任何文本都会
直接显示在图像下方。

例子：

<img src="test.png" width="50" height="50" alt="test" style="vertical-align:middle;"/>        This text is fine. <br />This text is not.

Answer 1

尝试这个：

<img src="test.png" width="50" height="50" alt="test" style="vertical-align:middle;"/>        

<div style='display:inline-block; vertical-align:top;'> 
    <span style='display:inline-block;vertical-align:middle;'>This text is fine. <br />This text is not.
</div>

Answer 2

您的示例包含 tag <br />，根据定义，这意味着换行符。

Answer 3

这是在 CSS 中对齐几乎所有内容的最佳方式。

.centrado-vertical{
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}