CODEWITHSUNDEEP
css
DextrousDave
DextrousDave

Reputation: 6793

Cannot get table to vertical-align in the middle

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!

Upvotes: 1

Views: 193

Answers (2)

DOCbrand
DOCbrand

Reputation: 339

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

Upvotes: 3

Blieque
Blieque

Reputation: 675

If the main header div will always be 100px high, remove the display property from the headerDiv element and add margin-top: 12px;.

Also it should have display: inline-block added and possibly the left margin decreased to compensate. The display property alteration will make it push off the image, not the left side of the document, as it should.

Also, if you want the two pieces of text to be aligned on the left, add text-align: left to the table tag.

Upvotes: 0

Related Questions