How to align text at bottom in <p> with <img>?_问答_开发者

How to align text at bottom in <p> with <img>?

开发者 https://www.devze.com 2022-12-24 17:37 出处：网络

This is the code. I want to align text at bottom <p style=\"background:#eee;font-size:1.3em;color:#022662;height:116px\">

相关专题：css xhtml

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.