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

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

这是一种古老且经常被遗忘的显示方法，但它是居中对齐内容的好方法

希望这可以帮助

小心和快乐编码