Maison >interface Web >tutoriel CSS >Une brève discussion sur le centrage horizontal du traitement CSS
Une brève discussion sur le centrage horizontal du traitement CSS
- 高洛峰original
- 2017-03-02 15:44:051414parcourir
L'éditeur suivant vous apportera une brève discussion sur la question du centrage horizontal du traitement CSS. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Venez jeter un oeil avec l'éditeur, je vous souhaite à tous un bon jeu
1. Paramètre de centrage horizontal - élément en ligne
Set 1 text-align:center through l'élément parent ; centre le contenu de l'élément parent
2. Paramètre de centrage horizontal - élément de bloc à largeur fixe
La largeur de l'élément de bloc est fixe valeur, en définissant " La valeur "Marge gauche et droite" est "auto" pour obtenir un centrage
Exemple :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定宽块状元素水平居中</title>
<style>
p{
width: 200px;/*固定的宽度*/
margin: 20px auto;/*左右margin设置为auto*/
border: 1px solid red;
}
</style>
</head>
<body>
<p>我是定宽块状元素，我要水平居中显示。</p>
</body>
</html>
3. Réglage du centrage horizontal - élément de bloc à largeur variable
Méthode 1. Ajouter une balise de table
Exemple :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
table{
margin:0 auto;
}
/*下面是任务区代码*/
.wrap{
background:#ccc;
}
</style>
</head>
<body>
<table>
<tbody>
<tr><td>
<p class="wrap">
我要水平居中
</p>
</td></tr>
</tbody>
</table>
</body>
</html>
Méthode 2. Définir la méthode display:inline, similaire à la première méthode, définissez le afficher le type pour les éléments en ligne, procéder aux paramètres d'attribut pour les éléments à largeur variable
Exemple :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{text-align:center;}
.container ul{list-style:none;margin:0;padding:0;display:inline;}
.container li{margin-right:8px;display:inline;}
</style>
</head>
<body>
<p class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</p>
</body>
</html>
Méthode 3. Définir la position : relative et gauche : 50 % Utilisez le positionnement relatif pour décaler l'élément de 50 % vers la gauche, c'est-à-dire pour atteindre l'objectif de centrage
Exemple :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
/*下面是代码任务区*/
.wrap{
clear:both;
float:left;
position:relative;
left:50%
}
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
</style>
</head>
<body>
<!--下面是代码任务区-->
<p class="wrap">
<p class="wrap-center">我们来学习一下这种方法。</p>
</p>
</body>
</html>
ci-dessus Cette brève discussion sur la question du centrage au niveau du traitement CSS est tout le contenu partagé par l'éditeur, j'espère qu'il pourra vous donner une référence, et j'espère également que tout le monde soutiendra le PHP chinois. site web.
Pour plus d'articles sur le centrage du niveau de traitement CSS, veuillez faire attention au site Web PHP chinois !