Hi all,

Can some please help, I have only been doing css for a week now, no excuse as i should be able to work it out but how do i do a vertical align.

Basically i have

#maintextsleft {
WIDTH: 475px;
HEIGHT: 430px;
BACKGROUND: #FFFFFF;
FLOAT: left;
TEXT-ALIGN: center;}

and i want the image and test to be center horizontally and vertically.

If you can help i will be very grateful.

Cheers

Tank

The CSS code would be:

vertical-align: middle;

vertical align: middle; will make the image go like shown below. The middle of the image will align with the text.

||||Top||||
||||mid|||| Text aligns to middle.
||bottom||

And that will not work to do what the OP wants. Vertical-align: center does not work like the valign does in tables, and it is not meant to. Per the CSS specs:

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists.

Here are a couple of solutions to vertically center using CSS:
http://murphy.cz/victoria-s-vertical-centering/
http://www.badboy.ro/articles/2005-0...lign_with_css/

A good one that I use for headers and things (i know this probably doesn't apply to this particular situation but it's useful to know) is to set the line-height attribute to the same size as the height of the div

Tim want's to vertically center an image and/or text.

One option is to create a containing div which has either padding or margin:

<div class="padding">
<div id="maintextleft">
blah blah lorum ipsum...
</div><!-- /#maintextleft -->
</div><!-- /.padding -->

where your css says something like:

div.padding { padding:5px; margin: 4px 0px;
                   }

you may need to play with the numbers to get the exact effect you want.

jefkin

Thanks all, been away over the weekend so i will have a play today,

Cheers :-)