Maison >interface Web >tutoriel CSS >Présentez brièvement la méthode de mise en œuvre de la mise en page sur une seule colonne et de la mise en page centrale horizontale à l'aide de HTML+CSS.
Présentez brièvement la méthode de mise en œuvre de la mise en page sur une seule colonne et de la mise en page centrale horizontale à l'aide de HTML+CSS.
- 巴扎黑original
- 2017-09-07 09:32:421767parcourir
Cet article présente principalement les informations pertinentes sur HTML+CSS pour réaliser une mise en page sur une seule colonne et une mise en page centrée horizontalement. Les amis qui en ont besoin peuvent se référer à
Mise en page centrée horizontale
.Élément parent text-align:center; Élément enfant : inline-block;
-
Avantages : Bonne compatibilité ;
Inconvénients : Vous devez définir à la fois l'élément enfant et l'élément parent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.parent {
width: 100%;
background: green;
text-align: center;
}
.child {
display: inline-block;
width: 800px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<p class="parent">
<p class="child">1</p>
<p class="child">2</p>
<p class="child">3</p>
<p class="child">4</p>
<p class="child">5</p>
<p class="child">6</p>
</p>
</body>
</html>
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn