表格 td 內的控件垂直對齊

最新推荐文章于 2026-06-23 15:10:44 发布

原创最新推荐文章于 2026-06-23 15:10:44 发布 · 190 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

收录于

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在HTML表格中使用`vertical-align:middle`属性实现按钮和文字的垂直居中对齐，包括`.vMiddle`类的两种实现方式。适合前端开发者理解和应用。

如下：

<style>
.vMiddle
{
  padding:6px;
  vertical-align: middle;
}
/*或者*/
   .vMiddle {
        display: table-cell;
        vertical-align: middle;
    }
</style>

....
 <td width="30%"  style="vertical-align: middle;">                                                              
       <button type="button" id='btnCheckIn' style="width:70px;max-width:50%;float:left" class="btn  btn-success">簽到</button>
   <h5 style="font-weight:bold; float:left;margin-left:5px;" class="vMiddle">這是簽到的地點</h5>
  </td>
  ....