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:063369parcourir

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!

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 du CSS pour ajouter des astérisques aux options de formulaire requisesArticle suivant：Explication détaillée du CSS pour ajouter des astérisques aux options de formulaire requises

Articles Liés

Voir plus