Maison > Article > interface Web > Comment définir le centre flottant en CSS ?

Comment définir le centre flottant en CSS ?

不言original: 2018-10-30 14:05:2326196parcourir

Dans l'attribut float du CSS, float:right flotte vers la droite et float:left flotte vers la gauche, mais l'attribut centered n'est pas défini Alors que devons-nous faire si nous voulons centrer l'attribut float ? Cet article vous présentera comment centrer l'attribut float en CSS.

Nous utilisons souvent le centrage flottant lors de la création des barres de navigation. Nous allons maintenant utiliser le centrage flottant des barres de navigation pour vous présenter la méthode de centrage flottant en CSS. (Recommandations associées : Comment utiliser l'attribut float en CSS?)

Comment centrer float en CSS : Utilisez display:inline-block et float:left

Regardons l'exemple de code spécifique au centrage du flotteur :

<!DOCTYPE html>
 <html>
    <head>
        <meta charset=utf-8" />
        <title></title>
        <style type="text/css">
            * {
             margin:0; 
             padding:0; 
             list-style:none;
         }
            body {
             text-align:center;
         }
            li {
             float:left; 
             font-size:12px;
         }
            a {
             float:left; 
             border:1px solid #000; 
             padding:5px 10px; 
             text-decoration:none; 
             color:#000;
         }
            ul {
             display:inline-block; 
             *display:inline; 
             zoom:1;
         }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#nogo">首页</a></li>
            <li><a href="#nogo">视频</a></li>
            <li><a href="#nogo">文章</a></li>
            <li><a href="#nogo">登录</a></li>
            <li><a href="#nogo">留言</a></li>
        </ul>
    </body>
 </html>

L'effet du centrage du flotteur est le suivant :

Comment définir le centre flottant en CSS ?

Concernant le code ci-dessus, nous verrons un *display:inline;, qui est en fait une méthode d'écriture de hack CSS (si vous ne connaissez pas le hack CSS ; méthode d'écriture, vous pouvez le rechercher vous-même sur Baidu) *{ margin: 0;padding: 0;} est un style de "réinitialisation" courant dans le passé, ce qui signifie que tous les éléments de la page Web sont étroitement liés entre eux parce que différents. les navigateurs produiront différents styles d'éléments par défaut, donc *{ margin: 0; padding: 0;} L'objectif principal est de vous aider à réinitialiser les styles par défaut des différents navigateurs, afin que les résultats des différents navigateurs affichant des pages Web ne soient pas trop différents. .

Après avoir lu les méthodes ci-dessus, vous ne penserez peut-être parfois pas à utiliser le hack CSS pour écrire, et la compatibilité n'est pas bonne

Jetons donc un coup d'œil à la méthode d'implémentation sans utiliser *display. :inline;

Exemple de code montrant comment définir le centrage flottant en CSS (sans utiliser *display:inline;) :

<!DOCTYPE html>
 <html>
    <head>
        <meta charset=utf-8" />
        <title></title>
        <style type="text/css">
     * {
    padding: 0px;
    margin: 0px;
}
.xlk-nav {
    width: 100%;
    height: 40px;
    text-align: center;
        background-color: lightblue;
}
.xlk-menu {
    height: 100%;
    float: left;
    line-height: 40px;
    padding: 0 20px;
    margin-right: 20px;
    background-color: pink;
    
}
        </style>
    </head>
    <body>
     <div class="xlk-nav">
        <div style="display: inline-block;">
            <div class="xlk-menu">首页</div>
            <div class="xlk-menu">视频</div>
            <div class="xlk-menu">文章</div>
            <div class="xlk-menu">登录</div>
            <div class="xlk-menu">留言</div>
        </div>
    </div>
    </body>
 </html>

L'effet de centrage est le suivant :

Comment définir le centre flottant en CSS ?

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!

css Float display margin padding

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：Comment utiliser l'attribut float du CSS ? Explication détaillée de l'attribut flottant CSS floatArticle suivant：Comment utiliser l'attribut float du CSS ? Explication détaillée de l'attribut flottant CSS float

Articles Liés

Voir plus