Introduction à la méthode de paramétrage du centre en html (code)-tutoriel HTML-php.cn

Le contenu de cet article concerne l'introduction (code) de la méthode de réglage du centrage en HTML. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Centrage horizontal

Au cours du processus de développement proprement dit, nous rencontrerons de nombreuses situations où les éléments doivent être centrés horizontalement, comme les titres d'articles, etc. Les situations de centrage horizontal courantes incluent ici les éléments en ligne et les éléments de niveau bloc qui sont ensuite divisés en éléments de niveau bloc à largeur fixe et en éléments de niveau bloc à largeur variable. Les éléments de niveau bloc à largeur fixe, comme leur nom l'indique, signifient que la largeur des éléments de niveau bloc est une valeur fixe. Ainsi, pour les éléments de niveau bloc à largeur variable, nous savons que la largeur des éléments de niveau bloc ne l'est pas ; une valeur fixe.

Éléments en ligne

Lorsque l'élément en cours de définition est un élément en ligne tel qu'un texte ou une image, nous le faisons en définissant text-align:center sur l'élément parent .

<body>
    <div class="textCenter">这是一个在父元素中居中元素</div>
</body>
<style>
    textCenter{
    text-align:center;
    }
</style>

Copier après la connexion

À partir du code ci-dessus, nous pouvons voir que "Ceci est un élément centré dans l'élément parent". Le style CSS de l'élément parent de ce texte ajoute l'attribut text-align:center ; le texte est donc affiché au centre. Cependant, cette méthode n'est pas applicable lorsque l'élément à définir est un élément de niveau bloc. Les éléments de niveau bloc sont divisés en deux types : les éléments de niveau bloc à largeur fixe et les éléments de niveau bloc à largeur variable.

Élément de niveau bloc à largeur fixe

Si les deux conditions de l'élément de niveau bloc à largeur fixe "largeur fixe" et "élément de niveau bloc" sont remplies , vous pouvez définir les valeurs des marges gauche et droite pour que le centrage soit automatique.

<body>
    <div>水平居中的定宽块级元素</div>
</body>
<style>
    div{
        border:1px solid blue;
        width:100px;    /*宽度设置固定值*/
        margin:10px auto;
    }
</style>
/*或者也可以写成 margin-left:auto;
               margin-right:auto;*/
/* 元素的上下margin属性可以照常设置，不受影响 */

Copier après la connexion

Éléments de niveau bloc de largeur indéfinie

Il existe trois façons de centrer des éléments de niveau bloc de largeur irrégulière : la première consiste à ajouter une balise de table ; la seconde consiste à définir La méthode display:inline est similaire à la première méthode. Le type d'affichage est défini sur les éléments en ligne et les attributs des éléments à largeur variable sont définis. La troisième méthode consiste à définir position:relative et left:. 50 % et utilisez le positionnement relatif pour déplacer l'élément vers le décalage gauche de 50 % afin d'obtenir le centrage.

Ajouter la balise table

Ajouter la balise table pour profiter de l'adaptabilité en longueur de la balise table (sa longueur n'est pas définie et la longueur de l'élément parent le corps n'est pas par défaut. La longueur du tableau est déterminée en fonction de la longueur du texte interne), il peut être considéré comme un élément de niveau bloc à largeur fixe, puis utiliser la méthode de marge de l'élément de niveau bloc à largeur fixe pour centrez-le horizontalement.

La première étape à utiliser consiste à ajouter une balise de tableau à l'extérieur de l'élément qui doit être centré, puis à définir "les marges gauche et droite à centrer" pour ce tableau

<div>
    <table>
        <tbody>
            <tr><td>
            <ul>
                <li>锄禾日当午</li>
                <li>汗滴禾下土</li>
                <li>谁知盘中餐</li>
                <li>粒粒皆辛苦</li>
            </ul>
            </td></tr>
        </tbody>
    </table>
</div>
<style>
    table{
    border:1px solid;
    margin:0 auto;
    }
</style>

Copier après la connexion

Définir l'affichage : méthode en ligne

modifie l'affichage des éléments au niveau du bloc en type en ligne, le définit pour afficher les éléments en ligne, puis utilise text-align:center pour obtenir un affichage centré. L'avantage de cette méthode par rapport à la méthode table est qu'il n'est pas nécessaire d'ajouter des balises non sémantiques, mais cette méthode présente également certains problèmes, c'est-à-dire qu'elle change l'affichage des éléments de bloc en ligne, et les éléments seront moins quand ils deviennent des éléments en ligne.

<body>
    <div class="container">
        <ul>
            <li><a href="#">First</a></li>
            <li><a href="#">Second</a></li>
            <li><a href="#">Third</a></li>
        </ul>
    </div>
</body>
 
<style>
.container{
    text_align:center;
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
 
.container li{
margin-right:10px;
display:inline;
}
</style>

Copier après la connexion

Définir la position :relative et left:50%

En définissant float sur l'élément parent, puis en définissant la position:relative et left:50%, l'élément enfant Définir la position : relative et gauche : 50 % pour obtenir un centrage horizontal.

<body>
<div class="container">
    <ul>
        <li><a href=""#>First</a></li>
        <li><a href=""#>Second</a></li>
        <li><a href=""#>Third</a></li>
        <li><a href=""#>Fourth</a></li>
    </ul>
</div>
</body>
 
<style>
.container{
    float:left;
    position:relative;
    left:50%;
}
 
.container ul{
    list-style:none;
    margin:0;
    padding:0;
 
    position:relative;
    left:-50%
}
 
.container li{
    float:left;
    display:inline;
    margin-right:8px
}
</style>

Copier après la connexion

Centrage vertical

Le centrage vertical se divise en deux situations : le texte sur une seule ligne avec une hauteur déterminée de l'élément parent et le texte sur plusieurs lignes avec un hauteur déterminée de l'élément parent.

Une seule ligne de texte dont la hauteur est déterminée par l'élément parent

La méthode de centrage vertical d'une seule ligne de texte dont la hauteur est déterminée par l'élément parent est pour définir la hauteur et la hauteur de ligne de l'élément parent pour qu'elles soient cohérentes à atteindre. height est la hauteur de l'élément, line-height est la hauteur de la ligne, c'est-à-dire l'espacement des lignes, qui est la distance entre les lignes de base entre les lignes. La différence calculée entre la hauteur de ligne et la taille de police est divisée en deux (appelée « espacement des lignes » en CSS) et ajoutée en haut et en bas d'une ligne de texte. La plus petite boîte pouvant contenir ce contenu est une boîte de ligne. Ce type de hauteur de ligne de texte et de hauteur de bloc présente un inconvénient, c'est-à-dire que lorsque la longueur du contenu du texte est supérieure à la largeur du bloc, une partie du contenu se détache du bloc.

<div class="container">
    hello,world!
</div>
 
<style>
.container{
    height:10px;
    line-height:10px;
}
</style>

Copier après la connexion

Texte multiligne avec une certaine hauteur de l'élément parent

Il existe deux façons de centrer verticalement du texte multiligne, des images, etc. avec une certaine hauteur de l'élément parent. Tout d'abord, une solution consiste à insérer la balise table, puis à définir vertical-align:middle. Il existe un attribut vertical-align en CSS pour le centrage vertical. Lorsque l'élément parent définit ce style, il sera utile pour tous les éléments enfants de type bloc en ligne.

/* 方式一 */
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>居中一下</p>
</div>
</td></tr></tbody></table>
</body>
 
<style>
table td{
    height:500px;
    background:#ccc;
}
</style>
 
/* 方式二 */
<div class="container">
    <div>
        <p>居中一下下</p>
        <p>居中一下下</p>
        <p>居中一下下</p>
        <p>居中一下下</p>
        <p>居中一下下</p>
    </div>
</div>
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

Copier après la connexion

Dans les navigateurs tels que Chrome, Firefox et IE8 ou supérieur, vous pouvez définir l'affichage des éléments au niveau du bloc sur table-cell et activer l'attribut vertical-align, mais notez que IE6 et 7 le font ne supporte pas ce style.

Changement invisible du type d'affichage

Lorsque nous définissons l'attribut position:absolute ou float:left pour un élément au cours de notre processus de développement, le type d'affichage de l'élément changera automatiquement en display:inline_block (élément de niveau bloc), vous pouvez définir la largeur et la hauteur de l'élément.

<div class="container">
    <a href="#" title="">点这里看看</a>
</div>
<style>
.container a{
    position；absolute;
    width:200px;
    background:#ccc;
}
</style>

Copier après la connexion

Recommandations associées :

La différence entre le centrage des éléments HTML CSS et le centrage du contenu des éléments HTML

élément HTML Comment définir le centrage horizontal et vertical

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!