无法使表在在中间垂直对齐

Question

我有以下代码，我的表（表中包含图像旁边的两行文本）不想在div中间垂直对齐。该怎么办？请注意，我为我的两行文本使用了一个表（层粘连蛋白美丽和完美地放在一起），因为它们有不同的风格，我希望它们对齐，所以我在它们的td标签上放了align=center。。。（justify text属性仅在文本位于同一标记中时有效…）。我的网站：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;
}

谢谢！

Answer 1

使包含表的div具有100px的固定高度，因为这是Wrapperdiv的高度。然后，使表的高度为100%。这是它为我所做的一张截图，不完全确定这是否是你想要的：http://screencast.com/t/cbwcBbAoM3cZ

Answer 2

如果主标题div始终为100px高，请从headerDiv元素中删除display属性并添加margin-top: 12px;。

此外，它应该添加display: inline-block，并且可能减少左边缘以进行补偿。显示属性的更改将使其推离图像，而不是文档的左侧。

此外，如果希望两段文本在左侧对齐，请将text-align: left添加到table标记中。