/* 将表格内所有单元格的文本居中 */ table td, table th { text-align: center; } /* 某个特定单元格右对齐 */ .right-aligned-cell { text-align: right; }| 默认左对齐 | 行内右对齐 | 标题居中 |
|---|---|---|
| 类选择器右对齐 | 普通文本 | 这是一段尝试两端对齐的文本，看看它在表格单元格中的表现如何。通常需要多行文字才能看出效果。 |
table { height: 200px; /* 为了演示垂直对齐，给表格一个高度 */ width: 100%; border-collapse: collapse; } td, th { border: 1px solid #ccc; height: 80px; /* 给单元格一个高度 */ } .top-aligned { vertical-align: top; } .middle-aligned { vertical-align: middle; } .bottom-aligned { vertical-align: bottom; }| 顶部对齐的文本 | 垂直居中对齐的文本 | 底部对齐的文本 |
| 更多内容 多行文本 | 更多内容 多行文本 | 更多内容 多行文本 |
.my-table { width: 100%; border-collapse: collapse; } .my-table td, .my-table th { border: 1px solid #ddd; padding: 8px; height: 100px; /* 为了看出垂直对齐效果，给单元格一个固定高度 */ vertical-align: middle; /* 核心：垂直居中 */ text-align: center; /* 顺便也水平居中 */ }| 标题一 | 标题二 | 标题三 |
|---|---|---|
| 短文本 | 这是一段相对较长的文本，用来测试垂直居中对齐的效果，看看它在单元格中是否能很好地居中显示。 | 另一个短文本 |
.justified-cell { text-align: justify; /* 为了看到效果，可能需要限制宽度并增加内容 */ width: 150px; }| 这是一段需要两端对齐的文本，看看它在单元格中的表现，文字会尽可能填充整个宽度。 |
.flex-cell { display: flex; align-items: center; /* 垂直居中所有子项 */ justify-content: space-between; /* 子项之间平均分布空间 */ border: 1px solid #ccc; padding: 10px; } .icon { /* 假设是图标 */ margin-right: 10px; } .button { /* 假设是按钮 */ margin-left: 10px; }| ? 这是一个灵活对齐的单元格内容 |
.padded-cell { padding: 15px 20px; /* 上下15px，左右20px内边距 */ text-align: right; }| 右对齐且有更多内边距的文本。 |
.no-wrap-cell { white-space: nowrap; /* 不换行 */ overflow: hidden; /* 溢出部分隐藏 */ text-overflow: ellipsis; /* 溢出时显示省略号 */ text-align: center; /* 文本居中 */ max-width: 100px; /* 限制单元格宽度 */ }| 这是一个非常非常长的文本，它应该不会换行，并且会显示省略号。 |
以上就是如何设置HTML表格中文本的对齐方式？有哪些属性？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1567394.html
微信扫一扫 
支付宝扫一扫 
