轻松更改内联(inline)、内联块(inline-block)、内联表格(inline-table)以及表格单元(table cell)元素的纵向对齐方式。
使用 纵向对齐(vertical-alignment
) 工具类可以改变页面元素的纵向对齐方式。请注意,纵向对齐只对内联(inline)、内联块(inline-block)、内联表格(inline-table)以及表格单元(table cell)元素有影响。
根据需要选用 .align-baseline
、.align-top
、.align-middle
、.align-bottom
、.align-text-bottom
和 .align-text-top
即可。
如需纵向居中非内联(inline)内容(例如 <div>
等),请使用 flex box 工具类。
内联(inline)元素示例:
<span class="align-baseline">baseline</span> <span class="align-top">top</span> <span class="align-middle">middle</span> <span class="align-bottom">bottom</span> <span class="align-text-top">text-top</span> <span class="align-text-bottom">text-bottom</span>
表格单元示例:
baseline | top | middle | bottom | text-top | text-bottom |
<table style="height: 100px;"> <tbody> <tr> <td class="align-baseline">baseline</td> <td class="align-top">top</td> <td class="align-middle">middle</td> <td class="align-bottom">bottom</td> <td class="align-text-top">text-top</td> <td class="align-text-bottom">text-bottom</td> </tr> </tbody> </table>