CSS 垂直对齐图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1520825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical-align image
提问by jakeprzespo
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?
我有一个包含图像和 ap 标签的 div（见下文）。我想根据段落的行数垂直对齐 div 中间的图像。垂直对齐不起作用。我现在正在使用 JavaScript 来确定要向 margin-top 添加多少，但更愿意使用 CSS。有任何想法吗？
<div>
<img>
<p>Multi-line</p>
</div>
采纳答案by Luke Bennett
Try setting the line-heightattribute of the pelement to the height of the image, eg:
尝试将元素的line-height属性设置为p图像的高度，例如：
div p {
line-height: 18px;
}
Edit:Just realised I misread the question and missed the fact the pwould be multi-line. One option to try is removing the imgelement altogether and setting it as the background-imageof the pinstead, with a background-positionof left, center. Something like:
编辑：刚刚意识到我误读了这个问题并错过了p多行的事实。尝试的一种选择是img完全删除该元素并将其设置为background-imageofp而使用 a 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 */
}
回答by 0b10011
This is pure CSS, vertically aligns the image, and also resizes the image down if it's taller (or wider) than the containing box. Ergo, the box and image can both be any size without breaking the vertical alignment. Also, you may want to add a left margin to the <p>tags to keep them from being hidden by the image.
这是纯 CSS，垂直对齐图像，如果图像比包含框高（或宽），也会向下调整图像的大小。因此，框和图像都可以是任意大小，而不会破坏垂直对齐。此外，您可能希望为<p>标签添加左边距以防止它们被图像隐藏。
CSS
CSS
/* Positioning */
.absoluteCenterWrapper {
position: relative; /* Contains the image in the div */
}
.absoluteCenter { /* Aligns image vertically */
margin: auto;
position: absolute;
top: 0;
bottom: 0;
}
.absoluteCenterWrapper p { /* Pushes <p> to edge of image */
margin-left: 101px; /* Width of image */
}
.absoluteCenter { /* Specifies width of image to avoid overlap if image changes */
width: 101px; /* Width of image */
}
/* Sizing - resizes down to avoid cutting off */
.absoluteCenter {
max-height: 100%;
max-width: 100%;
}
/* Making it "pretty" */
.absoluteCenterWrapper { margin: 1em; padding: 0.001em; /* <- Hack to contain margins */ outline: 1px solid red; }
.absoluteCenterWrapper p { margin-top: 1em; margin-bottom: 1em; padding-left: 1em;}<div class="absoluteCenterWrapper">
<img class="absoluteCenter" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAXCAMAAAAlSHE3AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA2/AAANvwELq/fgAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAjFQTFRF/38A/4AB/4AC/4ED/4EE/4IF/4IG/4MH/4MI/4QJ/4QK/4UL/4UM/4YN/4YO/4cP/4cQ/4gR/4gS/4kT/4kU/4oV/4oW/4sX/4sY/4wZ/4wa/40b/40c/44d/44e/48g/5Ai/5Ej/5Ek/5Im/5Mo/5Qp/5Qq/5Ur/5Us/5Yt/5Yu/5cv/5cw/5gy/5kz/5o1/5o2/5s3/5s4/5w6/508/54+/58//59A/6BB/6FD/6FE/6JF/6JG/6NH/6NI/6RJ/6RK/6VL/6VM/6ZN/6ZO/6dP/6dQ/6hR/6lT/6pV/6pW/6xZ/61c/65d/65e/69g/7Bi/7Fj/7Jl/7Jm/7Nn/7No/7Rp/7Rq/7Vr/7Zt/7Zu/7dw/7hy/7p2/7t3/7t4/7x5/717/718/759/75+/79//7+A/8GD/8GE/8KF/8KG/8OH/8OI/8WL/8WM/8aO/8eQ/8iR/8iS/8mT/8mU/8qV/8uX/8uY/8yZ/8ya/82b/82c/86e/9Ch/9Ci/9Gj/9Km/9Oo/9Sp/9Sq/9Ws/9at/9ew/9ix/9mz/9m0/9q1/9u4/9y6/969/96+/9+//9/A/+DB/+LG/+TK/+XM/+bN/+bO/+fP/+jR/+nT/+nU/+rV/+vX/+vY/+za/+3b/+7e/+/f//Dh//Di//Hk//Po//Tp//Tq//Xr//Xs//bu//fv//jx//jy//nz//n0//r1//r2//v3//v4//z5//z6//37//38//79//7+////1DEj+QAAAndJREFUSInt1NlfTHEYx/HPNKYaSkVZRkyqGUq2CUOyDDUqe4U4kX3fyb5FliJtheitroadIMQkWSmpnM9Px1buZMZ/Kai2644Ln6vZ7f9znvi+ecA//rHy+jOw+AdPdkfXuKpwQ2e8aN9nGZnhXasdyTEG4nyDUANohLn54uW6BaEker2KVUO9ZI0t9VJq2tWmqKVGIclSWWcH5hOjDLYYRERzIwo6xivgEwO1LjF+9MCykLty01R1cqfsg3eZmhVyzN0unz7tDyb+6B4avkQ7lkwN6fA93SOBFsssfj719gl1KIvS1fetpPRSgNTqfT6TwmLiiUG/aYlR2qXnnY6yTutiwK5c9/MTBXug9AXQeslotjWOO9BTbxbTUa4+xSCopsx3AgEKFo5YIXPWOBfTJ7WMmSw0BCT0MoXyx57H5fq2Loug7PPpmAC0PTscnd8F4+NgG0Ryh1VqvValXERYy/RVEU5Yy4hxW3LAFo7AjlkwPVPLmyzm/OkfXQdQegSAqxiaIp4+QQwNkoe0mVD6qqqqq6aliplFyAmwPaQEtj3EBZSnC5IpOJCdYC5MtGbLJJU6yyC+BQtO33XdbaYWWVLAdoeqvdnOgrHEqj5eSj18CneoAyWaxXYoPHAC5FUx53poxUpg5eBSz+m9pAgajtcLzt+zmgvjcZuN8/Qa/Q9gowfY6mZHlbCyxZxQ/ide/YhWCN1dHqn6kNmH1yBpaJFAFzgs3zMo7KESKUErmemV3fE/V7yXkuIr4Gk06JPT0o8s4RHuCpuCDeG0gCWPZRxHfQGKlQ5ZPArf06ZWSNn59tHtGKnTMtahxm5Jp+b8bljfrf9L/+bP0CQB36KehprcoAAAAASUVORK5CYII=">
<p>Paragraph goes here.</p>
<p>Paragraph goes here.</p>
</div>
<div class="absoluteCenterWrapper">
<img class="absoluteCenter" src="data:image/png;base64,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">
<p>Paragraph goes here.</p>
<p>Paragraph goes here.</p>
<p>Paragraph goes here.</p>
</div>回答by snicker
the CSS vertical-align attributes only works on table cells and inline elements. Since the paragraph tag specifies a block element by default, it does nothing. In order for your text to be aligned as you describe, you either have to separate your div into two containers or use a table. Here's a good page to help you understand a little bit better: Understanding vertical-align
CSS vertical-align 属性仅适用于表格单元格和内联元素。由于段落标签默认指定一个块元素，它什么都不做。为了使您的文本按照您的描述对齐，您必须将 div 分成两个容器或使用表格。这是一个很好的页面，可以帮助您更好地理解：了解垂直对齐
回答by user97410
Give the image display: block, float: left and vertical-align: middle. Or, give it a line height equal to that of the containing element.
给图像显示：块，浮动：左和垂直对齐：中间。或者，给它一个等于包含元素的行高。
回答by Paul
Is it kind of a two column job? (image to the left, text to the right)
这是一种两栏工作吗？（左图，右图）
If so, you could surely just stick each element in its own div...
如果是这样，您当然可以将每个元素放在自己的 div 中...
<div>
<div style="width:100; float:left"><img /></div>
<div style="width:100; float:left"><p>multiline</p></div>
</div>
Think that would do what you're after
认为那会做你所追求的
回答by Ewan Todd
Maybe the solution at Jak psát webwill help.
也许Jak psát web 上的解决方案会有所帮助。
回答by Daniel A. White
Add
添加
div img {
float: left;
}
