垂直对齐图像 [英] Vertical-align image
问题描述
我有一个div,其中包含一个图像和一个p标签(见下文)。我想要在div的中间垂直对齐图像,这取决于段落的行数。垂直对齐不起作用。我现在使用JavaScript来计算多少添加到margin-top,但宁愿使用CSS。任何想法?
I have a div that contains an image and a p tag (seen below). I want to align the image in the middle of the div vertically depending on how many lines the paragraph is. Vertical-align doesn't work. I am using JavaScript right now to figure out how much to add to margin-top, but would rather use CSS. Any ideas?
<div>
<img>
<p>Multi-line</p>
</div>
推荐答案
p
元素的高度属性到图像的高度,例如:
Try setting the line-height
attribute of the p
element to the height of the image, eg:
div p {
line-height: 18px;
}
编辑:意识到我误解了问题,错过了 p
将是多行的事实。尝试的一个选项是删除 img
元素,并将其设置为<$ c $的 background-image
c> p ,而 background-position
则为 left,center
。像:
Just realised I misread the question and missed the fact the p
would be multi-line. One option to try is removing the img
element altogether and setting it as the background-image
of the p
instead, with a background-position
of left, center
. Something like:
div p {
background: transparent url(path/to/img) no-repeat left center;
padding-left:30px; /* Set based on width of image */
}
这篇关于垂直对齐图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!