vertically centre text to an image

Using CSS, is it possible to vertically align centrally text to an image as you can using tables?

A simple example using a table would be

<table border="0" width="100%">
<tr>
<td><img border="0" src="image.gif" width="609"height="115"></td>
<td valign="middle">Ray did this</td>
</tr>
</table>

Using CSS so far I've got...

<p><img class="imglft" border="0" src="img.jpg" width="434" height="400" alt="my image">Ray did this>

The CSS for imglft is...

.imglft{
float: left;
margin-right: 30px;

}

I've tried putting the whole lot in a DIV and using text-align: middle and vertical-align: middle but that doesn't work.

You can see what I mean by comparing http://brisray.com/grad.htm or http://members.lycos.co.uk/brisray/grad.htm with http://brisray.com/ray/rgrad.htm or http://members.lycos.co.uk/brisray/ray/rgrad.htm

Ray

Hi Ray

Images must not be left floated to keep itself in the same line text does, because they are treated like inline elements. Another tip, in CSS images don't need to be sized.

CSS file should be like this



and markup should be like this



That's it.

Good luck!

Carlos

Something like this will work if the text is limited to one line;
If you don't need to cater to IE, you can use something like this;
Otherwise, if you need multiple lines centered, you're stuck with a 2-cell table.

cheers,

gary

thanks for the replies. I had a nasty feeling this wasn't going to work properly. After looking at several sites about CSS image and text positioning not one mentioned doing what I wanted to do.

I tried Carlos's suggestion and that doesn't work. Though it looks like it should.

Gary's idea looks good but according to my site stats - http://gostats.com/gogi/browser_war.pl?mn=brisray - won't work for over 90% of my visitors.

Looks like I'll have to choose between the "middled" tables or CSS.

Ray

Vertically Centering Elements with CSS


Images have never had to have their sizes specified, unless they were being used for something like the nasty transparent GIF hack.

Specifying the size for images usually will help the page to render faster.

clm2206: By specifying image dimensions, the browser may render the page while reserving space for the images. As images are loaded, it is unnecessary to redraw the page. The user may begin viewing/reading even as images are downloaded and placed in their reserved parking spots.

kravvitz: That's an elegant, if a bit klutzy, work-around for IE's lack of css support. Nice find.

I owe you some rep++. Can I get a proxy? Someone?

cheers,

gary

bisray: I'll not argue about my example not being appropriate for the majority browser. I used it mostly to point out that there are css properties to handle your needs, except that IE has little support for css2. I had seen kravvitz's method (probably in another kravvitz post), but had not used it, so I didn't think to try to describe it, much less google for it. That left the 2-cell table.

I wonder about your stats. I don't know your target audience, but they must be technologically dysfunctional. Except for 28 instances of Opera[1], there seems to be no cases of any but out-of-the-box preloaded browsers[2]. I saw no NN6+, Mozilla, or Firefox.

Since your audience is about 98% IE5/6, and not exactly early adopters, are you making any effort to steer them away from such a security risk by suggesting they use Opera or Firefox?

cheers,

gary

[1] Opera <= 7 identified itself as IE, by default. Don't know about 8.

[2] NN4 was usually a manufacturer's preload, at least until IE6 arrived.

Hi Gary

Thank you very much, great tip!! So I must declare every image size for a faster rendering. Jus a couple of questions:

1. Where does it work better? In the CSS file or inside the <img> tag?

2. Does the same applies to background images?

Sorry for deviating the thread.

Carlos

1) I don't know, maybe Gary does.
2) No, because space does not need to be reserved for them. How would you specify dimensions of a background image anyway?

You're right...

Hi Ray

I tested the code before pasting my reply. I don't doubt about your word, so there must be some inherited code that messes up what in theory should really work.

Take a look at this link and see it by yourself.

The only code I've added to the original posted lines above are image width and height attributes.

Regards,

Carlos

I have not a clue. My gut sez as an html attribute, but I have no reason. :shrug: OTOH, as an attribute, it applies to that image and no other. As a css property, you'd have to create classes, or ids, or some other cascade of selectors to indicate just which image you mean.

One more reason to always dimension your images; if the link breaks, not having the size will cause your layout to cinch up into the space you meant for the pic.

As to the snipped query no. 2; what kravvitz said.

cheers,

gary