Image and text not vertically aligning when using Div tags and CSS - css

Question

I'm not that great at CSS. I get how the properties work together but sometimes I don't get the results I want. I have a banner at the top of my page which contains a logo and some text.
They are contained in separate div tags in one larger div tag but my Text aligns to the top of the div tag while my image is centered vertically. How do I get the centers aligned vertically?
<div id="webBanner">
<div id="bannerImage">
<a href="Dashboard.aspx" title="Accreditation Data">
<img src="Images/logo.png" />
</a>
</div>
<div id="bannerText">
Accreditation Database (AD)
</div>
</div>
CSS:
#webBanner
{
height: 60px;
width: 100%;
vertical-align: top;
}
#bannerText
{
font-family: Arial;
font-size: xx-large;
font-style: italic;
color: #fff;
margin: 2px 5px;
}
#bannerImage
{
height: inherit;
float:left;
width: 223px;
vertical-align: middle;
margin: 2px 5px;
}

Answer 1

CSS vertical align does not work the way most people expect it to. It won't actually do anything at all in this particular case.
What you probably want to do is solve this with padding on your bannerText element.
For example, to vertically center 20px text in a 60px wrapper:
#webBanner {
height: 60px;
width: 100%;
}
#bannerText {
font-size: 20px;
height: 20px;
padding: 20px 0;
/* 20px padding on top and bottom plus 20px height = 60px total */
}
Note, the 0 in the padding refers to the left and right padding. You may want to adjust that depending on how your banner is designed.
Also, the "height: 20px" declaration is redundant if the only content in the div is text and the line height is not adjusted. I included it to provide a general solution.

Answer 2

#bannerText {
line-height: 60px;
}
Is one way..

Answer 3

I'd recommend something along the lines of this...
HTML:
<div id="webBanner">
<a id="bannerLink" href="Dashboard.aspx" title="Accreditation Data">
<img src="Images/logo.png" />
</a>
<h1>Accreditation Database (AD)</h1>
</div>
CSS:
#webBanner
{
height: 60px;
}
#webBanner h1
{
color: #fff;
float: left;
font-family: Arial;
font-style: italic;
line-height: 60px;
}
#bannerLink
{
display: block;
float: left;
height: 60px;
width: 223px;
}
You can adjust the CSS to vertically center the logo image by using margin:.

Answer 4

Given your text is inside a div, this may work:
#bannerText {
vertical-align: middle;
}
See this clear tutorial for more information on your options.