Vertical-Align middle in Div

Bigshowmg
Bigshowmg used Ask the Experts™
on
Hi
How do I vertically align my text in the middle of a div tag with a set height?
Many thanks
Matt
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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;}
HainKurtSr. System Analyst

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

Author

Commented:
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
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
The excel sheet is attached, cheers

Book1.xlsx
take the line height off the div in the html page

Author

Commented:
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?
HainKurtSr. System Analyst

Commented:
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?

Author

Commented:
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; }

Open in new window

Commented:
Good old IE6. Give this a whirl.

<style type="text/css">
.favouritesLinkText {display: table; #position: relative; overflow: hidden; margin:0px 5px 0px 0px; float:right; width:406px; 
 
font-weight:normal; font-size:12px; line-height:16px; border:1px solid #000;}
.favouritesLinkText .innerContainer {#position: relative; #top: -50%}
.favouritesLinkText .outerContainer {#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;}
</style>
 
<div class="favouritesLinkText" style="height:84px;">
    <div class="outerContainer">
      <div class="innerContainer">
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
      </div>
    </div>
</div>

Open in new window

Author

Commented:
Hi Teggert

That worked like a charm, thanks alot!!

Matt

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial