垂直对齐图像

小编典典

css

我有一个包含图像和ap标签的div（如下所示）。我想根据段落的多少行在div的中间垂直对齐图像。垂直对齐不起作用。我现在正在使用JavaScript找出要添加到margin-
top的数量，但是宁愿使用CSS。有任何想法吗？

<div>
    <img>
    <p>Multi-line</p>
</div>

阅读 306

2020-05-16

共1个答案

小编典典

尝试将元素的line-height属性设置为p图像的高度，例如：

div p {
  line-height: 18px;
}

编辑： 刚意识到我读错了问题，却错过了p多行的事实。尝试的一种选择是img完全删除元素，并将其设置为background- imageof的p，使用的background-positionof left, center。就像是：

div p {
  background: transparent url(path/to/img) no-repeat left center;
  padding-left:30px; /* Set based on width of image */
}

2020-05-16