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

Comment définir le centre flottant en CSS ?

Oct 30, 2018 pm 02:05 PM
float

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>
Copier après la connexion

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>
Copier après la connexion

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!

Déclaration de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Quelle est la valeur maximale du float ? Quelle est la valeur maximale du float ? Oct 11, 2023 pm 05:54 PM

Valeur maximale de float : 1. En langage C, la valeur maximale de float est 3,40282347e+38. Selon la norme IEEE 754, l'exposant maximum du type float est de 127 et le nombre de chiffres de la mantisse est de 23. De cette façon, le nombre à virgule flottante maximum est 3,40282347 e+38 ;

Quelle est la précision du flotteur ? Quelle est la précision du flotteur ? Oct 17, 2023 pm 03:13 PM

La précision du float peut atteindre 6 à 9 décimales. Selon la norme IEEE754, le nombre de chiffres significatifs que peut représenter le type float est d'environ 6 à 9 chiffres. Il convient de noter qu'il ne s'agit que de la précision maximale théorique. En utilisation réelle, en raison de l'erreur d'arrondi des nombres à virgule flottante, la précision du type float est souvent inférieure. Lors de l'exécution d'opérations sur des nombres à virgule flottante dans un ordinateur, une perte de précision peut survenir en raison des limitations de précision des nombres à virgule flottante. Afin d'améliorer la précision des nombres à virgule flottante, vous pouvez utiliser des types de données de plus grande précision, tels que double ou long double.

Que incluent les octets float32 ? Que incluent les octets float32 ? Oct 10, 2023 pm 04:07 PM

L'octet float32 comprend le bit de signe, le bit d'exposant et le bit de mantisse, et est utilisé pour représenter des nombres à virgule flottante de 32 bits. Introduction détaillée : 1. Bit de signe (1 bit), utilisé pour représenter le signe d'un nombre, 0 représente un nombre positif, 1 représente un nombre négatif ; 2. Bit d'exposant (8 bits), utilisé pour représenter la partie exposant d'un nombre. nombre à virgule flottante, via le bit exposant, vous pouvez ajuster la plage de taille du nombre à virgule flottante ; 3. Le bit de mantisse (23 bits) est utilisé pour représenter la partie mantisse du nombre à virgule flottante, et le bit de mantisse stocke la partie décimale du nombre à virgule flottante. Le bit de signe détermine le signe d'un nombre à virgule flottante, et le bit d'exposant et le bit de mantisse déterminent conjointement la taille et la précision du nombre à virgule flottante.

Que signifie float en langage C ? Que signifie float en langage C ? Oct 12, 2023 pm 02:30 PM

Float en langage C est un type de données utilisé pour représenter des nombres à virgule flottante simple précision. Les nombres à virgule flottante sont des nombres réels représentés en notation scientifique et peuvent représenter des valeurs très grandes ou très petites. Les variables de type float peuvent stocker des valeurs avec 6 chiffres significatifs après la virgule décimale. En langage C, le type float peut être utilisé pour opérer et stocker des nombres à virgule flottante. Ses variables peuvent être utilisées pour représenter des décimales, des fractions, des valeurs scientifiques. notation, etc. qui nécessitent une représentation précise. Les nombres réels, contrairement aux types entiers, les nombres à virgule flottante peuvent représenter des nombres après la virgule décimale et peuvent effectuer quatre opérations arithmétiques sur les décimales.

Quelles sont les longueurs flottantes de la base de données ? Quelles sont les longueurs flottantes de la base de données ? Oct 10, 2023 pm 03:57 PM

Les longueurs flottantes courantes des bases de données sont les suivantes : 1. La longueur du type float dans MySQL peut être de 4 octets ou 8 octets. 2. La longueur du type float dans Oracle peut être de 4 octets ou 8 octets. 3. , La longueur du type float dans SQL Server ; est fixé à 8 octets ; 4. La longueur du type float dans PostgreSQL peut être de 4 octets ou 8 octets, etc.

Quels problèmes la disposition flottante causera-t-elle ? Quels problèmes la disposition flottante causera-t-elle ? Oct 10, 2023 pm 03:31 PM

La disposition des flottants peut entraîner des problèmes tels que l'effacement des flottants, des problèmes de chevauchement d'éléments, des problèmes d'habillage de texte et des problèmes de mise en page réactive. Introduction détaillée : 1. Résolvez le problème du flottement. Lors de l'utilisation de la disposition flottante, les éléments flottants se détacheront du flux de documents, ce qui peut empêcher le conteneur parent d'envelopper correctement les éléments flottants. Le conteneur parent s'effondrera, provoquant un chaos de mise en page ; 2. Problème de chevauchement d'éléments Lorsque plusieurs éléments utilisent une disposition flottante, ils peuvent se chevaucher parce que les éléments flottants n'occupent plus la position normale du flux de documents, etc.

Quelles sont les valeurs de l'attribut float ? Quelles sont les valeurs de l'attribut float ? Oct 10, 2023 pm 02:03 PM

Les valeurs de l'attribut float incluent gauche, droite, aucun, hériter, clearinline-start et inline-end. Introduction détaillée : 1. à gauche, l'élément flotte vers la gauche, c'est-à-dire que l'élément sera aussi près que possible du côté gauche du conteneur, et d'autres éléments l'entoureront sur le côté droit ; flotte vers la droite, c'est-à-dire que l'élément sera aussi proche que possible du conteneur. À droite, d'autres éléments l'entoureront à gauche ; 3. La valeur par défaut est none, les éléments ne flotteront pas et seront disposés ; selon le flux normal des documents, etc.

Quelle est la différence entre float et double Quelle est la différence entre float et double Oct 11, 2023 pm 05:38 PM

Les principales différences entre float et double résident dans la précision, la vitesse de stockage et de calcul, la portée et l'utilisation dans les langages de programmation. Introduction détaillée : 1. La précision est différente. Float est un nombre à virgule flottante simple précision, occupant 4 octets (32 bits), tandis que double est un nombre à virgule flottante double précision, occupant 8 octets (64 bits) ; la vitesse de stockage et de calcul est différente, le double prend plus de place et nécessite plus d'espace de stockage pour stocker les valeurs, il peut être plus efficace d'utiliser le type float 3. Différentes plages, etc.

See all articles