Question

我有以下代码，我的表（该表包含图像旁边的两个文本行）只是不想在div的中间垂直对齐。该怎么办？请注意我使用了一个表格用于我的两个文本行（层粘连蛋美容并完美地放在一起），因为它们有不同的样式，我希望它们合理，所以我将align = center放在他们的td标签上...（仅证明文本属性）当文本在同一标签中时工作...）。我的网站：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的固定高度，因为这是Wrapper div的高度。然后，使表的高度100％。以下是它为我所做的截图，不完全确定这是否是您想要的：http://screencast.com/t/cbwcBbAoM3cZ

Answer 2

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

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

此外，如果您希望左侧对齐两个文本，请将text-align: left添加到表格标记。

无法让表格在中间垂直对齐

2 个答案: