Question

I have the following code, and my table(the table contains the two text lines next to the image) just does not want to align vertically in the middle of the div. What to do?
Please note that I used a table for my two text lines(laminin beauty and perfectly put together), since they have different styles and I want them justified, so I put align= center on their td tags… (justify text property only works when text is in the same tag…) . My website: http://lamininbeauty.co.za/index2.html

HTML:

        <div id="header">
            <img class="massage" src="images/massage.png" border="none" alt="face massage" />
            <div class="headerDiv">
                <table margin="0" padding="0">
                <tr><td align="center" class="headerText1">Laminin Beauty</td></tr>
                <tr><td align="center" class="headerText2">"Perfectly put together"</td></tr>
                </table>
            </div>
        </div>

CSS:

#header{
    width: 100%;
    height: 100px;
    background: #000000;
}

#header img{
    margin-left: 50px;
    vertical-align: middle;
    display: inline-block;
    float: left;
}

#header div.headerDiv{
    display: table-cell;
    margin-left: 80px;
    vertical-align: middle;
}

.headerText1{
    color: #fff;
    font-family: impact;
    font-size: 32px;
    text-decoration: underline;
}

.headerText2{
    color: #ee00ee;
    font-family: century gothic;
    font-size: 24px;
}

Thank You!

Answer 1

Make the div containing the table have a fixed height of 100px, since that’s the height of your Wrapper div. Then, make the height of the table 100%. Here’s a screenshot of what it did for me, not entirely sure if this is what you want: http://screencast.com/t/cbwcBbAoM3cZ