Question

如果我有像这样的html，如何在中间图像上垂直对齐文本。我希望文本的流量总是在中间，即使有两行文本。

<div class="area-position">
    <img src="image.jpg" alt="image" /> 
    <a class="image-text" href="/link">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a>
</div>

我找到了多种解决方案，但没有将图像作为div的一部分。

我应该以其他方式生成html吗？

Answer 1

我有两种方法可以想到。

使用CSS从文档流中分离图像。

div.area-position {
    position:relative;
}

div.image-text {
    position:absolute;
    top:0;
    left:0;
}

或者将图片设置为div的背景。

div.area-position {
    background:url('image.jpg') top left no-repeat;
}

无论哪种方式，您都需要指定容器的宽度和高度。

Answer 2

您可以尝试此代码示例

#parent {display: table}

#child {
  display: table-cell;
  vertical-align: middle;
 }

这是一种旧的，经常被遗忘的显示方法，但却是一种集中对齐的好方法

希望这有帮助

保重和快乐编码

垂直对齐中间图像上的文本

2 个答案: