在css中设置字体位置需要结合不同的css属性，根据水平方向、垂直方向以及具体布局场景选择合适的属性，就能精准控制字体的显示位置。
水平方向字体位置设置
水平方向的字体位置主要通过text-align属性控制，该属性作用于块级元素，用来设置元素内文本的水平对齐方式。
常用的text-align属性值如下：
- left：文本左对齐，是大多数语言的默认对齐方式
- right：文本右对齐
- center：文本居中对齐
- justify：文本两端对齐，最后一行不生效
以下是水平对齐的代码示例：
/* 块级容器样式 */
.text-container {
width: 300px;
height: 100px;
border: 1px solid #ccc;
}
/* 左对齐 */
.left-text {
text-align: left;
}
/* 居中对齐 */
.center-text {
text-align: center;
}
/* 右对齐 */
.right-text {
text-align: right;
}
<div class="text-container left-text">
这是左对齐的文本内容
</div>
<div class="text-container center-text">
这是居中对齐的文本内容
</div>
<div class="text-container right-text">
这是右对齐的文本内容
</div>
垂直方向字体位置设置
单行文本垂直居中
单行文本的垂直居中可以通过设置line-height属性实现，将line-height的值设置为容器的高度，就能让单行文本在容器中垂直居中。
示例代码如下：
.single-line {
width: 300px;
height: 60px;
line-height: 60px; /* 行高等于容器高度 */
border: 1px solid #ccc;
text-align: center; /* 同时设置水平居中 */
}
<div class="single-line">
单行文本垂直居中
</div>
多行文本垂直对齐
多行文本的垂直位置调整可以使用vertical-align属性，该属性主要作用于行内元素和表格单元格，用来设置元素在垂直方向的对齐方式。
常用属性值如下：
- top：元素顶部对齐
- middle：元素居中对齐
- bottom：元素底部对齐
如果是表格单元格内的文本垂直对齐，可以直接给<td>或者<th>设置vertical-align属性：
.table-cell {
vertical-align: middle; /* 单元格内容垂直居中 */
height: 100px;
border: 1px solid #ccc;
}
<table>
<tr>
<td class="table-cell">
表格单元格内的多行文本内容，这里会垂直居中显示
</td>
</tr>
</table>
其他字体位置调整方式
如果需要更精细的字体位置调整，还可以使用position定位属性，通过相对定位或者绝对定位来移动字体元素的位置。
绝对定位调整字体位置的示例：
.position-container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
.position-text {
position: absolute;
top: 50%; /* 距离顶部50% */
left: 50%; /* 距离左侧50% */
transform: translate(-50%, -50%); /* 自身偏移50%实现完全居中 */
}
<div class="position-container">
<span class="position-text">通过定位居中的文本</span>
</div>
常见问题说明
很多开发者会遇到vertical-align属性不生效的情况，这是因为该属性只对行内元素、行内块元素和表格单元格生效，对块级元素无效。如果要调整块级元素内文本的垂直位置，优先使用line-height或者定位的方式。
另外text-align属性会被子元素继承，如果块级元素设置了text-align:center，内部的行内元素都会居中对齐，不需要再单独给子元素设置该属性。
css字体位置text_alignvertical_alignline_height修改时间：2026-07-05 14:33:22