请选择 进入手机版 | 继续访问电脑版
MSIPO技术圈 首页 IT技术 查看内容

html 表格使用css让内容垂直居中的三种方法

2023-07-07

 CSS中的表格垂直居中是一个常见的问题。在许多情况下,我们需要将表格中的内容垂直居中,从而使页面看起来更加美观和整洁。在这篇文章中,我们将讨论几种常见的方法,帮助你实现表格的垂直居中。
/* 方法 1:使用 display: table-cell 和 vertical-align */
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
/* 在 HTML 中使用以下代码 */
<div class="table">
<div class="table-row">
<div class="table-cell">内容 1</div>
<div class="table-cell">内容 2</div>
<div class="table-cell">内容 3</div>
</div>
</div>

使用 display: table-cell 和 vertical-align 可以让表格中的内容垂直居中。这种方法需要将表格的整体结构用 div 包裹起来,并使用 display: table、display: table-row 和 display: table-cell 来定义单元格的排列方式,然后使用 vertical-align: middle 将内容垂直居中。

/* 方法 2:使用 line-height 和 height */
.cell {
height: 100px;
line-height: 100px;
}
/* 在 HTML 中使用以下代码 */
<div class="cell">内容</div>

使用 line-height 和 height 可以让单元格中的内容垂直居中。这种方法需要设置单元格的高度为固定值,并使用和高度相同的 line-height 值来使文本垂直居中。

/* 方法 3:使用 transform */
.cell {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* 在 HTML 中使用以下代码 */
<div class="cell">内容</div>

使用 transform 可以让单元格中的内容垂直居中。这种方法需要设置单元格的 position 属性为 relative,然后使用 top: 50% 将其移动到纵向的中央位置,最后使用 transform: translateY(-50%) 将其移回到垂直居中的位置。

相关阅读

热门文章

    手机版|MSIPO技术圈 皖ICP备19022944号-2

    Copyright © 2024, msipo.com

    返回顶部