Heim >Web-Frontend >Front-End-Fragen und Antworten >So zentrieren Sie Text in CSS
So zentrieren Sie Text in CSS
- 藏色散人Original
- 2021-04-13 09:36:173484Durchsuche
css让文字居中的方法：首先创建一个HTML示例文件；然后在body中定义一些文字内容；最后通过“text-align”或“line-height”属性实现文字水平或垂直方向居中即可。
本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。
使用
text-align属性来使文字水平居中
text-align属性规定元素中的文本的水平对齐方式，通过使用center值设置文本居中。
text-align是一个基本的属性，它会影响一个元素中的文本行互相间的对齐方式。值left、right和center会导致元素中的文本分别左对齐、右对齐和居中，想要使文本居中，直接使用center即可。
该属性设置文本和img标签等一些内联对象（或与之类似的元素）的居中。
该属性有如下几个特点：
1）、text-align的center应用在一个容器上，它只针对容器里面的文字以及容器里面的display为inline或者inline-block的容器，如果里面的容器display为block，则里面的容器的内容不会居中。
2）、text-align具有向下传递性，会不断地向子元素传递。如果设置一个div，则其子div中的内容也会居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 水平居中</title>
<style>
.box {
width: 400px;
height: 100px;
background: pink;
text-align:center;
}
</style>
</head>
<body>
<div class="box">css 水平居中了--文本文字</div>
</body>
</html>效果图：
使用line-height属性来使单行文字垂直居中
line-height 属性设置行间的距离（行高）。不允许使用负值。
该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: paleturquoise;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>效果图：
使用vertical-align:middle +display:table-cell使多行文字垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: paleturquoise;
vertical-align:middle;
display:table-cell;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字,文本文字,文本文字,文本文字,文本文字,文本文字。</div>
</body>
</html>效果图：
说明：vertical-align:middle +display:table-cell能够使单行文字、多行文字都居中。但是因为 table-cell 是 inline 类型，所以会导致原来的块级元素每个 div 一行移动到了同一行。如果需要分列两行，需要在外面额外添加容器对位置进行控制。
【推荐学习：css视频教程】
Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Text in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!