Heim > Artikel > Web-Frontend > Informationen zum Zentrieren schwebender CSS-Elemente

Informationen zum Zentrieren schwebender CSS-Elemente

小云云Original: 2017-12-13 13:10:063329Durchsuche

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>

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;

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erklärung von CSS zum Hinzufügen von Sternchen zu erforderlichen FormularoptionenNächster Artikel：Ausführliche Erklärung von CSS zum Hinzufügen von Sternchen zu erforderlichen Formularoptionen

In Verbindung stehende Artikel

Mehr sehen