1

我有以下代码，我的表格（表格包含图像旁边的两个文本行）只是不想在 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;
}

谢谢你！

4

2 回答 2

3

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

于 2012-07-18T20:10:29.840 回答
0

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

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

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

于 2012-07-18T20:07:13.477 回答