table表格td内容垂直居中
方法一：
给标签设置text-align以及line-height属性
如果line-height不加important的话，就不会垂直居中，因为table自带的一些属性会影响我们设置的line-height
<style>
td, tr,th{
text-align: center;
}
td{
line-height: 34px !important;
}
</style> 方法二：
前端页面编写时，table表格排版时最容易遇到的，就是单元格内的内容无法居中，又不能写行高时，可以使用以下方法：
table td {
vertical-align: middle!important;
}
vertical-align 属性设置元素的垂直对齐方式。
!important 提升指定样式规则的应用优先权。
IE6及以下浏览器不兼容!important，如需兼容IE6及以下，则需考虑兼容问题！
方法三：
水平居中
text-align 应用于块级元素的文本水平居中text-align=left; 左对齐
text-align=right; 右对齐
text-align=justify; 两端对齐
text-align=center; 水平居中
将块级元素中的内联元素设置为水平居中，并不能使块级元素水平居中
垂直居中
vertical-align应用于行内元素和替换元素，如图像和表单输入元素。vertical-align不影响块级元素中的内容对齐。但可用于使表单元格中的元素垂直对齐。
vertical-align= middle；垂直居中
<table>
<tr>
<td style="border:1px solid black;vertical-align: middle;text-align: center;">
水平垂直居中
</td>
</tr>
</table> 图片居中也可以使用同样的方法
方法四：
justify-content决定元素在主轴上的排布方式，align-items决定元素在交叉轴上的排布方式。
因此：当flex的横向排布时(flex-direction:row)，此时主轴方向为水平方向，交叉轴方向为垂直方向，这时justify-content决定元素在水平方向的排布方式，align-items决定元素在垂直方向的排布方式。
当flex的纵向排布时(flex-direction:column)，此时主轴方向为垂直方向，交叉轴方向为水平方向，这时align-items决定元素在水平方向的排布方式，justify-content决定元素在垂直方向的排布方式。
<style>
div{
display:flex;
justify-content:center;
align-items:center;
}
</style>
<body>
<table>
<tr>
<td style="border:1px solid black;">
<div>
水平垂直居中二
</div>
</td>
</tr>
</table>
</body> HTML<table>标签
定义和用法
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
HTML 与 XHTML 之间的差异
在 HTML 4.01 中，table 元素的 "align" 和 "bgcolor" 属性是不被赞成使用的。
在 XHTML 1.0 Strict DTD，table 元素的 "align" 和 "bgcolor" 属性是不被支持的。
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| align |
| 不赞成使用。请使用样式代替。 规定表格相对周围元素的对齐方式。 |
| bgcolor |
| 不赞成使用。请使用样式代替。 规定表格的背景颜色。 |
| border | pixels | 规定表格边框的宽度。 |
| cellpadding |
| 规定单元边沿与其内容之间的空白。 |
| cellspacing |
| 规定单元格之间的空白。 |
| frame |
| 规定外侧边框的哪个部分是可见的。 |
| rules |
| 规定内侧边框的哪个部分是可见的。 |
| summary | text | 规定表格的摘要。 |
| width |
| 规定表格的宽度。 |
- 本文标签： Html 前端
- 本文链接： http://www.92cxy.cn/article/41
- 版权声明： 本文由王小东原创发布，转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
