How to align text at bottom in <p> with <img>?
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
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?
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>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:
<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.
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;
Due to the fact that hasLayout isn'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;
<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.
<!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>
Could vertical-align be what you are looking for?
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.
加载中,请稍侯......
精彩评论