html - 使用 flexbox 垂直对齐 td 元素中的元素

标签 html css html-table

<分区>

如何在表格数据 td 元素中垂直居中元素/文本,该元素填充其父表格行 tr 的整个高度?我认为 flexbox 是这里最好的方法。

这是我到目前为止尝试过的:https://jsfiddle.net/3tr0cn4s/1/

最佳答案

为此您不需要 flex:因为它是一个表格单元格,所以添加就足够了

.table > tbody > tr > td.cell {
  vertical-align: middle;
}

https://jsfiddle.net/1jp53m1q/1/

(长选择器是覆盖现有单元格内容顶部对齐规则所必需的)

关于html - 使用 flexbox 垂直对齐 td 元素中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46819805/

上一篇:css - 无法从 HTML 文本访问 CSS 文件

下一篇:html - 悬停父元素会触发多个元素,包括自身

相关文章:

html - 使用 Bootstrap 垂直和水平集中

javascript - 在滚动 div 颜色变化

CSS flexible padding-divs with centered text inside, max-padding

html - 如何在HTML表格中的框右上角写入文本

css - 修复了仅最后一页打印的粘性页脚

javascript - 如何修复将 JS 制作的 HTML 元素放入实际的 HTML 正文中?

html - 在 jsFiddle 中工作的 FileReader API,但不是来自本地文件

jQuery addClass ('error' ) 到 "jQuery Validation Plugin v1.12"内的表单字段

CSS 位置/高度 - 页面与屏幕的 100%

html - 嵌入 HTML 表格单元格中的 SVG 是否会溢出该单元格?