ansaurus

Question

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

Answer 1

+5 A:

EDIT: 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>

DisgruntledGoat 2010-03-24 14:37:11

text goes under image if i remove float

metal-gear-solid 2010-03-24 14:43:00

What is not clear in question even after adding example link http://jsbin.com/ubiji/ ?

metal-gear-solid 2010-03-24 14:49:49

I think that would work with a float. (BTW, interesting use of <span>; rarely do I see it used that way (^_^)=b ).

Patrick Niedzielski 2010-03-24 14:51:37

@DisgruntledGoat - still not working http://jsbin.com/ubiji/4

metal-gear-solid 2010-03-24 14:54:21

Any ideas how to do it without using display:inline-block?

Ivan 2010-03-24 14:55:07

@jitendra, you need to drop float:left from your image

Ivan 2010-03-24 14:58:45

@jitendra, come on now you didn't even implement my code, here is what I put: http://jsbin.com/ubiji/5

DisgruntledGoat 2010-03-24 14:58:56

oh ok . will it work in all browser including IE6?

metal-gear-solid 2010-03-24 15:02:40

Also to answer why it wasn't clear: First, the example link only shows how it looks at the moment, not how you WANT it to look. Second, saying you want "to align text at bottom" does not really explain it properly - did you only want the first line to align with the image, or the text as a whole block...etc. The left float also indicated you wanted text to wrap around the image.

DisgruntledGoat 2010-03-24 15:03:43

no i just added float:left to img because without it text twas going below image

metal-gear-solid 2010-03-24 15:06:21

I don't have access to IE6 so you'll have to test it yourself. I do know that IE6 amazingly *does* support `display:inline-block` on inine elements like `span` so it should be fine. You can also add `display:-moz-inline-box;` on the span for Firefox 2, if necessary.

DisgruntledGoat 2010-03-24 15:07:27

Answer 2

A:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd"&gt;
<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>

chacha 2010-03-24 14:38:22

That technically isn't standard HTML 4 (or HTML 5). I'd recommend not using the ``align="bottom"''. See http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.2

Patrick Niedzielski 2010-03-24 14:40:14

@Patrick Niedzielski - this is not working also

metal-gear-solid 2010-03-24 14:46:10

Answer 3

A:

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.

Patrick Niedzielski 2010-03-24 14:38:26

`div` inside `p`

metal-gear-solid 2010-03-24 14:46:55

If I took your question correctly, you want the batch of text and the image to be aligned at the bottom. The <div> adds a block that groups the text separately from the image.If you use Chromium, it has a nice feature that allows you to see the block layout dynamically by highlighting it. Something like that may clear it up.

Patrick Niedzielski 2010-03-24 14:53:59

@Patrik: I think jitendra meant that `div` inside `p` is not valid HTML. Actually using a `div` didn't work for me.

DisgruntledGoat 2010-03-24 15:05:14

@DisgruntledGoat, Oh, sorry, I misunderstood. ^_^

Patrick Niedzielski 2010-03-24 15:12:26

Answer 4

+1 A:

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.

Glenn Nilsson 2010-03-24 15:18:25

Elegant answer! It works fine for me.

Patrick Niedzielski 2010-03-24 15:28:37

ansaurus

tags:

views:

answers:

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

related questions