À propos du centrage des éléments flottants CSS-tutoriel CSS-php.cn

À propos du centrage des éléments flottants CSS

小云云

Libérer： 2017-12-13 13:10:06

original

3357 Les gens l'ont consulté

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>

Copier après la connexion

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;

Copier après la connexion

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>

Copier après la connexion

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!