Question

快速的问题我正在努力，希望我刚刚陷入脑力障碍，而且我错过了一些简单的事情。

我们有一堆表格标题，其中一些表格中包含排序/向下箭头。我们希望文本左对齐，图像在表头单元格中右对齐。我在一个span容器中有2个箭头图像（但这可以是一个div），nowrap应用于它，以确保它们总是并排显示（这也是一个要求）。复杂性是我们的一些表头文本需要分成2行 - 这是目前在文本中使用br完成的。当我使用float时：右对齐图像，它们垂直对齐多行文本的顶部，而不是单元格的中间。我做错了什么（可能会有点迟到）或者我是否需要彻底重新考虑我的策略？

Thx MH

Answer 1

使用带浮点数的div：左侧用于标题文本，使用浮点数：右侧用于图像。 vertical-align：顶部标题。抱歉讨厌的着色。我不是设计师。

你可以在jsfiddle处理它。

测试表：

<table>
    <tr>
        <th>
            <div class="title">a header with a </br>br thing </div>
            <div class="updown">up down</div></th>
        <th>
            <div class="title">a header</div>
            <div class="updown">up down</div>
        </th>
        <th>
            <div class="title">more headers</div>
            <div class="updown">up down</div>
        </th>
    </tr>
</table>

风格：

th, td { border: 1px solid green; }
th { width: 200px; vertical-align: top; }

.title { float: left; border: solid 1px purple; overflow: hide; }
.updown { border: solid 1px red; float: right; }

Answer 2

在图像上尝试vertical-align：middle。

Answer 3

这看起来似乎无法完成 - 我们可以接近，但是每个解决方案让它们一起工作会破坏别的东西。感谢您的建议

在表格标题单元格中对齐多行文本和图像

3 个答案: