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

您的示例包含标记<br />，根据定义，它代表换行符。

Answer 3

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

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

垂直对齐CSS属性

3 个答案: