CSS 如何将 <p> 底部的文本与 <img> 对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2508506/
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
How to align text at bottom in <p> with <img>?
提问by Jitendra Vyas
This is the code. I want to align text at bottom
这是代码。我想在底部对齐文本
<p style="background:#eee;font-size:1.3em;color:#022662;height:116px">
<img width="174" height="116" src="#" style="margin-right:10px;float:left">
<strong>Text 1</strong>, <br>
text 2, <br>
text 3
</p>
added example to test http://jsbin.com/ubiji/2
添加了测试http://jsbin.com/ubiji/2 的示例
回答by DisgruntledGoat
Your question isn't clear but maybe you want the text to act like a block and have "text 3" the part lined up with the image?
您的问题不清楚，但也许您希望文本像块一样，并将“文本 3”部分与图像对齐？
If so, this should work:
如果是这样，这应该有效：
<p style="background:#eee;font-size:1.3em;color:#022662;height:116px;">
<img width="174" height="116" src="#" style="margin-right:10px; vertical-align:bottom">
<span style="display:inline-block; background: #ff6; vertical-align:bottom">
<strong>Text 1</strong>, <br>
text 2, <br>
text 3
</span>
</p>回答by Glenn Jorde
There should be a simple solution to this. There is not.
应该有一个简单的解决方案。那没有。
Some here say vertical-align:text-bottom or just vertical-align:bottom. Like this:
这里有些人说vertical-align:text-bottom 或只是vertical-align:bottom。像这样：
<p style="background:#eee;font-size:1.3em;color:#022662;height:116px;">
<img width="174" height="216" src="#" style="vertical-align:bottom;margin-right:10px;">
<strong>Text 1</strong>, <br>
text 2, <br>
text 3
</p>
This works as you intend if you only have one line of text, since it's the first line of text that is aligned with the image. This is because <img /> is by default display:inline;. If you only have one line, go for it.
如果您只有一行文本，这将按您的意图工作，因为它是与图像对齐的第一行文本。这是因为 <img /> 默认是 display:inline;。如果你只有一条线，那就去吧。
If you need a more robust solution, use positioning.
如果您需要更强大的解决方案，请使用定位。
<p style="background:#eee;font-size:1.3em;color:#022662;height:116px;position:relative;">
<img width="174" height="216" src="#" style="margin-right:10px;">
<span style="position:absolute;bottom: 0;">
<strong>Text 1</strong>, <br>
text 2, <br>
text 3
</span>
</p>
This works in IE7 Standards mode, and IE8 Standards mode. Also in Firefox etc... Note that the left-position is left out, to just default to where it should be without position:absolute;
这适用于 IE7 标准模式和 IE8 标准模式。同样在 Firefox 等中...请注意，左边的位置被忽略了，只是默认为没有位置的位置：绝对；
Due to the fact that hasLayoutisn't true in Quirks mode in IE6, 7 and 8, the solution doesn't work either. You have to give it 'layout' by giving it a dimension with height or width, or just fall back to the old faithful zoom:1;
由于在 IE6、7 和 8 的 Quirks 模式下hasLayout不正确，该解决方案也不起作用。你必须通过给它一个高度或宽度的尺寸来给它“布局”，或者只是回到旧的忠实缩放：1；
<p style="background:#eee;font-size:1.3em;color:#022662;height:116px;position:relative;zoom:1">
<img width="174" height="216" src="#" style="margin-right:10px;">
<span style="position:absolute;bottom: 0;">
<strong>Text 1</strong>, <br>
text 2, <br>
text 3
</span>
</p>
There you have it.
你有它。
回答by chacha
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TITLE</title>
</head>
<body>
<p>Here is your text
<img src="penseur.gif" width="70" height="137" align="bottom" alt="penseur">
at the bottom</p>
</body>
</html>
回答by Patrick Niedzielski
Could vertical-alignbe what you are looking for?
可能vertical-align是你要找的吗？
http://www.w3schools.com/css/pr_pos_vertical-align.asp
http://www.w3schools.com/css/pr_pos_vertical-align.asp
<p style="background:#eee;font-size:1.3em;color:#022662;height:116p"">
<img width="174" height="116" src="#" style="margin-right:10px;float:left">
<div style="vertical-align:text-bottom">
<strong>Text 1</strong>, <br>
text 2, <br>
text 3
</div>
</p>
You need the div there, I think.
我想你需要那里的 div。
