Question

我正在开始一个新项目，之前我在<td>单元格中有垂直对齐的内容，所以这个错误有点出乎意料。此外，我所做的任何研究（我之前也做过）都会产生我期望的信息（不能将vertical-align应用于块元素，应用display: table-cell;等）。 然而：

我的简单html文档中有以下表格：

<table id="headingTable">
    <tr>
        <td id="dateHolder">2013-07-24 15:03:18</td>
        <td><h2>City of Okmulgee Authorized Leave Request</h2></td>
        <td><button type="button" class="printBtn">Print Form</button></td>
    </tr>
</table>

使用这个适用的CSS：

table#headingTable
{
    width: 100%;
}

td
{
    vertical-align: middle;
}

h2
{
    font-family: Tahoma, Geneva, sans-serif;
    text-align: center;
}

.printBtn
{
    white-space: nowrap;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    font-size: 1em;
    border-width: 3px;
    border-color: #959595;
    cursor: pointer;
}

#dateHolder
{
    float: left;
}

<td id="dateHolder">单元格应显示中间的日期和时间，与该行的下两个表格单元格对齐，但您可以在此处看到它不是：

enter image description here

我想这个问题在我的身下，但显然不是，因为我被引导相信只要它是一个内联元素，或者至少是display: table-cell;的元素，但是特别是如果 IS 是一个表格单元格（即<td>元素），那么应该按照CSS中的规定应用vertical-align。

我确定我可以得到一些工作，（使用定位，行高调整，填充等），但事实上我似乎无法掌握为什么它不符合我设定的现行规则，只是为了我的教育而回答。

我尝试过的事情

在<span>元素中使用<td id="dateHolder">并使用CSS定位，而不仅仅是文本节点。

将高度（px）设置为<td>行中的所有<tr>元素。

调整<td>行中所有<tr>元素的行高。

您可能想知道的事情：

我绝对没有内联CSS。所有的CSS都在同一个外部文档中。

如果你觉得需要查看它，这里是整个CSS文件（这个网站还很新，所以还有很多）：

body
{
    width: 100%;
    margin: auto;
    background-color: #464646;
}

div#mainWrapper
{
    background-color: #dfdfdf;
    width: 900px;
    border-style: ridge;
    border-width: 5px;
    border-color: #808080;
    margin: auto;
    padding: 10px 20px 0px;
    margin-top: 8px;
    text-align: center;
    padding-bottom: 20px;
}

table#headingTable
{
    width: 100%;
}

td
{
    vertical-align: middle;
}

h2
{
    font-family: Tahoma, Geneva, sans-serif;
    text-align: center;
}

table#mainTable
{
    width: 95%;
    margin: auto;
    margin-top: 40px;
    border-collapse: collapse;
    border: 2px solid #000;
}

td.leaveSection
{
    width: 50%;
    margin: auto;
    white-space: nowrap;
}

.printBtn
{
    white-space: nowrap;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    font-size: 1em;
    border-width: 3px;
    border-color: #959595;
    cursor: pointer;
}

#dateHolder
{
    float: left;
}

div.bigLblWrapper
{
    position: relative;
    left: -50px;
    display: inline-block;
    text-align: right;
    width: 80%;
}

label.bigLbl
{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

input.leaveTypeRadio
{
    position: relative;
    left: -35px;
}

input[readonly]
{
    background-color: #c6ebff;
}

最后，我只想强调，我并不关心如何做到这一点的解决方案（再一次，我确信我可以让某些东西工作），因为我我对根据我设定的规则禁止我建立所需的样式更改的解释感兴趣。

Answer 1

您将<td>浮动到CSS的最后一条规则中 - 这会自动生成元素块级别，而vertical-align将无效，因为它仅适用于内联中的元素 - 格式化上下文您应该使用text-align来对齐<td>内容而不是浮动#dateHolder

http://jsfiddle.net/LRMrv/

为什么“垂直对齐中间”不能与此表格单元一起使用？

1 个答案: