Question

我有一个适用于表的代码：

<table class="table table-striped as-table">
    <thead class="as-table-head">
        <tr>
            <th>
                <input type="checkbox" name="checkBoxHead" style="margin-left: 7px;">
            </th>
            <th> <span>Status</span>

                <div class="btn-group pull-right">
                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                    <img class="as-table-head-dropdown-arrow" src="~/Content/img/hd-pop.png">
                    </a>

                    <ul class="dropdown-menu">
                        <li><a href="/app/1">Item A</a>
                        </li>
                        <li><a href="/app/2">Item B</a>
                        </li>
                        <li><a href="/app/3">Item C</a>
                        </li>
                    </ul>
                </div>
            </th>
            <th>Name</th>
            <th>Status</th>
            <th>Key</th>
            <th>Download</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" name="checkBoxHead">
            </td>
            <td>0</td>
            <td>stubby1</td>
            <td>0</td>
            <td>babdad1f-46a0-4149-abf6-f8e3649a9ade</td>
            <td>Download</td>
            <td></td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="checkBoxHead">
            </td>
            <td>1</td>
            <td>stubby2</td>
            <td>1</td>
            <td>b8gkwd1f-9g74-4149-abf6-hgytkg49a97dmn</td>
            <td>Download</td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS：

.as-table-head {
    background-color:rgb(30, 36, 42);
    width:100%;
}
.as-table-head > tr > th {
    color:white;
    font: bold 13px/15px;
    padding:0 !important;
    height: 30px;
}
.as-table-head > tr > th:hover {
    background-color:#333e48;
}

Fiddle

我遇到的问题是对齐标题文本（“状态”）和img。我希望文本位于左侧居中，img 位于右侧居中。

但是，margin-top或margin-bottom似乎对这两个元素都没有影响。

此外，要求img和text是单独的元素，因为它们在单击时都需要有自己的功能。

有人有什么想法吗？

Answer 1

您可以垂直对齐单元格内容，例如：

<th class="valigned"> 
    <span>Status</span>
    <div class="btn-group pull-right"> 
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            <img class="as-table-head-dropdown-arrow" src="~/Content/img/hd-pop.png" />
        </a>
    </div>
    <!-- ... -->
</th>

CSS：

.as-table-head .valigned:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

为什么会起作用：vertical-align应用于内联/内联块元素，使它们相对于彼此对齐。在您的情况下，您只有一个内联元素（span），div会浮动，因此它是block级元素。所以你可以做的只是注入伪元素并使其成为inline，以便span可以垂直对齐。

演示： https://jsfiddle.net/DTcHh/4300/

对齐多个元素

1 个答案: