So zentrieren Sie Text in CSS-Front-End-Fragen und Antworten-php.cn

So zentrieren Sie Text in CSS

藏色散人

Freigeben： 2023-01-05 16:07:51

Original

3474 Leute haben es durchsucht

css让文字居中的方法：首先创建一个HTML示例文件；然后在body中定义一些文字内容；最后通过“text-align”或“line-height”属性实现文字水平或垂直方向居中即可。

So zentrieren Sie Text in CSS

本文操作环境：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>

Nach dem Login kopieren

效果图：

So zentrieren Sie Text in CSS

使用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>

Nach dem Login kopieren

效果图：

So zentrieren Sie Text in CSS

使用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>

Nach dem Login kopieren

效果图：

So zentrieren Sie Text in CSS

说明：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!