Vertical-Align middle in Div

What you need to do is give your div a line height and then put the content into a span.  Then for the span you can use vertical-align:middle.

Like this..
#divname {line-height:8em;}
#divname span {vertical-align:middle;}

can you please draw what you want on excell and post here...

Sorry but I can't get this to make a difference, here is my css -

.favouritesLinkText { margin:0px 5px 0px 0px; float:right; width:406px; font-weight:normal; font-size:12px; line-height:16px; }
.favouritesLinkText span {vertical-align:middle;}

And my html is as follows -

<div class="favouritesLinkText" style="height:84px;"><span>orem ipsum dolor sit amet, consectetur adipiscing lit. Nulla rhonc us ullamcorper leo sed blandit. orem ipsum oncus ullamcorper le oed blandit. orem ipsum dolor sit amet</span>
                </div>

Am I doing somethign wrong?

Thanks

Matt

The excel sheet is attached, cheers

Book1.xlsx

take the line height off the div in the html page

Thanks but that doesn't make any difference. Surely by doing that the div's height would be set by the height of the text within it. I need the div to be higher and because of this I'd like the text to sit in the middle (vertically).

Thanks for your help so far, is there something else I'm doing wrong?

forget the div element and use :)

.favouritesLinkText { margin:0px 5px 0px 0px; float:right; width:406px; font-weight:normal; font-size:12px; }

And my html is as follows -

<table class="favouritesLinkText"><tr><td style=" padding:20px 5px 20px 5px; vertical-align:middle;">
orem ipsum dolor sit amet, consectetur adipiscing lit. Nulla rhonc us ullamcorper leo sed blandit. orem ipsum oncus ullamcorper le oed blandit. orem ipsum dolor sit amet
</td></tr></table>

Bigs,

I tried it here and it works for me without a problem.  Both in IE 7 and FF......what browser are you testing in?

HainKurt - Thanks but I'm trying to keep tables out of the page.

Iharrispv - I've tested in FF and IE6 and neither work, I've attached some more of the HTML and CSS if that helps?

Cheers

Matt

<div class="favouritesLinkTitleCont">
            	<div class="favouritesTitleCont">VAdd</div>
                <div class="favouritesLinkCont"><a href="#" target="_blank" class="favouritesLink">WWW.ddd.COM</a></div>
            </div>
            <div class="favouritesLinkContent">
            	<div class="favouritesLinkImage"><img src="images/vapour_image.png" alt="Vapour" class="imageBorder5" /></div>
                <div class="favouritesLinkText" style="height:84px;"><span>orem ipsum dolor sit amet, consectetur adipiscing lit. Nulla rhonc us ullamcorper leo sed blandit. orem ipsum oncus ullamcorper le oed blandit. orem ipsum dolor sit amet</span>
                </div>
            </div>
 
and CSS
 
.favouritesLinkTitleCont { height:26px; background:#FFA813; margin:0px 0px 7px 0px; float:left; width:592px; }
.favouritesTitleCont { padding:4px 0px 0px 3px; height:18px; font-weight:bold; font-size:16px; width:315px; overflow:hidden; float:left; }
.favouritesLinkCont { padding:4px 0px 0px 0px; height:22px; width:270px; float:left; text-align:right; overflow:hidden; }
a:link.favouritesLink, a:visited.favouritesLink, a:active.favouritesLink { font-weight:bold; font-size:16px; font-weight:bold; color:#000000; text-decoration:none; }
a:hover.favouritesLink { text-decoration:underline; }
.favouritesLinkContent { margin:0px 0px 7px 0px; float:left; width:592px; }
.favouritesLinkImage { margin:0px 0px 0px 0px; float:left; width:168px; }
.favouritesLinkText { margin:0px 5px 0px 0px; float:right; width:406px; font-weight:normal; font-size:12px; line-height:16px; }
.favouritesLinkText span {vertical-align:middle;}
.favouritesSplitter { height:3px; background:#FFFFFF; margin:0px 0px 10px 0px; width:592px; float:left; }

Select allOpen in new window

Hi Teggert

That worked like a charm, thanks alot!!

Matt