Maison > Article > interface Web > À propos du centrage des éléments flottants CSS
À propos du centrage des éléments flottants CSS
- 小云云original
- 2017-12-13 13:10:063381parcourir
Dans cet article, nous vous présentons principalement le centrage des éléments flottants CSS. Pour tout le monde, le centrage fait référence à la page. À l'heure actuelle, nous utilisons généralement 50 % pour y parvenir. éléments flottants, j'espère que cela pourra aider à trouver tout le monde.
<script>ec(2);</script>
Concernant le centrage des éléments flottants, il n'est effectivement pas couramment utilisé, mais pour faire face à certains intervieweurs bizarres, il faut aussi savoir comment résoudre ce problème.
J'ai posté un morceau de code CSS :
width:50%; height:300px; float:left; margin-left:50%; position:relative; left:-25%;background-color:#ccc;
La clé est de donner une marge à gauche, puis de la positionner de manière à ce que la valeur de gauche soit la moitié de la largeur p, et vous pouvez y parvenir.
En fait, cette méthode est aussi une méthode couramment utilisée pour créer une fenêtre pop-up et la placer au milieu du navigateur : donner une marge gauche (en haut) et une valeur gauche (en haut) en position .
Exemple
<style type="text/css">
.ps{background:#ccc;width:600px;height:300px;margin:50px auto 0;}
.ps p{margin:0 auto;background:#000;width:400px;text-align:center;}
p{float:left;height:100px;width:98px;background:#fff;border:1px solid red;margin:0 auto;}
</style>
<body>
<p class="ps">
<p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
</p>
</p>
</body>Nous avons constaté que l'effet de centrage peut également être obtenu, mais son évolutivité est médiocre. Si vous supprimez un p ou ajoutez un p, vous devez modifier le style .ps p. La largeur est modifiée.
Recommandations associées :
Introduction à la définition et à l'utilisation du flottant et du positionnement CSS
Résumé de la définition et de l'utilisation de la fonction flottante CSS
Une brève introduction à la méthode de flottant 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!