Informationen zum Zentrieren schwebender CSS-Elemente-CSS-Tutorial-php.cn

Informationen zum Zentrieren schwebender CSS-Elemente

小云云

Freigeben： 2017-12-13 13:10:06

Original

3356 Leute haben es durchsucht

In diesem Artikel stellen wir Ihnen hauptsächlich die Zentrierung von CSS-Floating-Elementen vor. Zu diesem Zeitpunkt verwenden wir normalerweise 50%, um dies zu erreichen schwebende Elemente. Ich hoffe, es kann helfen, alle zu finden.

<script>ec(2);</script>

Nach dem Login kopieren

Die Zentrierung schwebender Elemente wird eigentlich nicht häufig verwendet, aber um mit einigen seltsamen Interviewern umzugehen, müssen Sie auch wissen, wie Sie dieses Problem lösen können.

Einen CSS-Code gepostet:

width:50%; height:300px; float:left; margin-left:50%;  position:relative; left:-25%;background-color:#ccc;

Nach dem Login kopieren

Der Schlüssel besteht darin, einen linken Rand anzugeben und ihn dann so zu positionieren, dass der linke Wert die Hälfte der p-Breite beträgt, und Sie können es erreichen.

Tatsächlich ist diese Methode auch eine häufig verwendete Methode, um ein Popup-Fenster zu erstellen und in der Mitte des Browsers zu platzieren: Geben Sie einen linken (oberen) Rand und einen linken (oberen) Wert für die Position an .

Beispiel

 <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>

Nach dem Login kopieren

Wir haben festgestellt, dass der Zentrierungseffekt ebenfalls erreicht werden kann, die Skalierbarkeit jedoch schlecht ist. Wenn Sie ein p löschen oder hinzufügen, müssen Sie den .ps-p-Stil ändern Die Breite wird geändert.

Verwandte Empfehlungen:

Einführung in die Definition und Verwendung von CSS-Floating und -Positionierung

Zusammenfassung der Definition und Verwendung von CSS-Floating-Funktionen

Eine kurze Einführung in CSS-Floating-Methoden

Das obige ist der detaillierte Inhalt vonInformationen zum Zentrieren schwebender CSS-Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!