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

#bannerText {
    line-height: 60px;
}

Is one way..