首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

垂直对齐 | Vertical alignment

轻松更改内联,内联块,内嵌表格和表格单元格元素的垂直对齐方式。

vertical-alignment实用程序更改元素的对齐方式。请注意,垂直对齐仅影响内联,内联块,内联表和表格单元格元素。

选择.align-baseline.align-top.align-middle.align-bottom.align-text-bottom,和.align-text-top

内联元素:

代码语言:javascript
复制
<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>

使用表格单元格:

代码语言:javascript
复制
<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>

扫码关注腾讯云开发者

领取腾讯云代金券