Invision Power Services > [CSS] Vertical Alignment

Help - Search - Members - Calendar

Full Version: [CSS] Vertical Alignment

Invision Power Services > Community Forums > Community Web Design and Coding

Wombat

Jun 8 2005, 05:43 PM

I have the following HTML:

CODE

<div id="header">
<div id="logo"><img src="logo.png"></div>
<div id="caption">The Caption</div>
</div>

and the following CSS:

CODE

#header {
   margin-left: 10px;
   margin-right: 10px;
   padding: 0px 0px 0px 0px;
   border: thin solid black;
}

#header #logo {
   width: 145px;
   float: left;
}

#header #caption {
   height: 50px;
   text-align: center;
   font-size: 14pt;
   font-weight: bold;
   font-style: italic;
}

How do I get #caption to be vertically aligned in the middle of #header?

Vertical alignment with CSS always gives me trouble.

Michael K.

Jun 8 2005, 05:52 PM

Try adding "line-height: 50px;" to #caption.

Wombat

Jun 8 2005, 05:58 PM

QUOTE(Gornakle @ Jun 8 2005, 06:52 PM)

Try adding "line-height: 50px;" to #caption.

Cheers! Worked Like a charm!

Stephen

Jun 8 2005, 06:16 PM

Yeh that is probably the most common misconception in CSS, vertical align is not like the "valign" attribute on a cell where the alignment is relative to the edge of the containers but rather it is relative to the height of the line.

Wombat

Jun 8 2005, 06:25 PM

QUOTE(Stephen @ Jun 8 2005, 07:16 PM)

Ahh! I see! Thanks for the explanation!

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.