Maison >interface Web >tutoriel CSS >Comment centrer la police en CSS ?
Comment centrer la police en CSS ?
- 青灯夜游original
- 2019-05-20 09:36:1946962parcourir
Comment centrer la police en CSS ? L'article suivant vous le présentera, j'espère qu'il vous sera utile.
1. CSS définit la police pour qu'elle soit centrée horizontalement
Vous pouvez utiliser l'alignement du texte attribut en CSS pour définir la police pour qu'elle soit centrée horizontalement. Cette propriété spécifie l'alignement horizontal du texte dans l'élément, en utilisant la valeur centrale pour centrer le texte.
text-align est un attribut de base qui affecte la façon dont les lignes de texte d'un élément sont alignées les unes avec les autres. Les valeurs gauche, droite et centre entraîneront l'alignement du texte de l'élément respectivement à gauche, à droite et centré. Si vous souhaitez centrer le texte, utilisez simplement centre.
Cet attribut définit le centrage de certains objets en ligne (ou éléments similaires) tels que les balises text et img.
Cet attribut a les caractéristiques suivantes :
1) Le centre de text-align est appliqué à un conteneur. Il cible uniquement le texte dans le conteneur et l'affichage dans le conteneur comme en ligne ou. inline. -Block conteneur, si l'affichage du conteneur à l'intérieur est bloqué, le contenu du conteneur à l'intérieur ne sera pas centré.
2), text-align est transitif vers le bas et continuera à être transmis aux éléments enfants. Si vous définissez un div, le contenu de ses divs enfants sera également centré.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 水平居中</title>
<style>
.box {
width: 400px;
height: 100px;
background: #ddd;
text-align:center;
}
</style>
</head>
<body>
<div class="box">css 水平居中了--文本文字</div>
</body>
</html>Rendu :
2. CSS définissant le centrage vertical de la police
1. L'attribut line-height rend le texte centré verticalement --- police sur une seule ligne
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>Rendu :
Cela centrera le texte dans le div horizontalement et verticalement
2. Mise en page flexible CSS3 pour centrer le texte verticalement
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
/*设置为伸缩容器*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*垂直居中*/
-webkit-box-align: center;/*旧版本*/
-moz-box-align: center;/*旧版本*/
-ms-flex-align: center;/*混合版本*/
-webkit-align-items: center;/*新版本*/
align-items: center;/*新版本*/
}
</style>
</head>
<body>
<div class="box">css 垂直居中--文本文字（弹性布局）</div>
</body>
</html> Rendu :
3. table-cell Centrer le texte verticalement
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: #ddd;
vertical-align:middle;
display:table-cell;
}
</style>
</head>
<body>
<div class="box">css 水平居中了--文本文字,文本文字,文本文字,文本文字,文本文字,文本文字。</div>
</body>
</html>Rendu :
Description : vertical- align:middle +display:table-cell peut centrer à la fois le texte sur une seule ligne et le texte sur plusieurs lignes. Cependant, étant donné que table-cell est un type en ligne, les éléments d'origine au niveau du bloc seront déplacés vers la même ligne par div. Si vous devez diviser les lignes en deux lignes, vous devez ajouter un conteneur supplémentaire à l'extérieur pour contrôler la position.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!