Maison > Article > interface Web > 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:421749parcourir

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

Article précédent：Explication détaillée de la façon d'implémenter une bordure de 0,5 pixel avec CSSArticle suivant：Explication détaillée de la façon d'implémenter une bordure de 0,5 pixel avec CSS

Articles Liés

Voir plus