在HTML中，<th>标签用于表示表头单元格，要使<th>标签中的文本居中，可以使用CSS样式，本文将详细介绍如何使用CSS使<th>标签中的文本居中，并提供一个相关问题与解答的栏目。
使用CSS的text-align属性使<th>标签中的文本居中
1、内联样式
在<th>标签中添加内联样式，可以直接设置text-align属性为center。
<table>
<tr>
<th style="text-align: center;">姓名</th>
<th style="text-align: center;">年龄</th>
</tr>
</table>
2、外部样式表
在HTML文件的<head>部分引入外部CSS文件，然后在<th>标签中设置text-align: center;。
<!DOCTYPE html>
<html>
<head>
<style>
th {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
</body>
</html>
使用CSS的margin: auto;和display: block;属性使<th>标签中的文本居中
1、将<th>标签设置为块级元素
通过设置display: block;,可以将<th>标签设置为块级元素，使其具有宽度，设置左右外边距(margin)为自动(auto),可以使文本在水平方向上居中。
th {
display: block;
margin-left: auto;
margin-right: auto;
}
2、在HTML文件中引入外部CSS文件或内联样式
可以在HTML文件的<head>部分引入外部CSS文件，或者直接在<head>部分添加内联样式。
<!DOCTYPE html>
<html>
<head>
<style>
/* 或者直接在 <head> 标签内添加以下内联样式 */
th {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
</body>
</html>
相关问题与解答
Q1: 如何使表格的标题行背景色与其他行不同？
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/189239.html
微信扫一扫 