Heim > Artikel > Web-Frontend > Einführung in die Methode zur Verwendung von CSS zum Zentrieren schwebender Elemente

Einführung in die Methode zur Verwendung von CSS zum Zentrieren schwebender Elemente

高洛峰Original: 2017-03-10 11:02:141965Durchsuche

Dieser Artikel stellt hauptsächlich die Methode zur Verwendung von CSS zum Zentrieren von schwebenden Elementen vor. Es handelt sich um das Grundwissen für das einführende Erlernen von CSS. Freunde in Not können sich auf

Methode 1

Stellen Sie den schwebenden Modus des Containers auf absolute Positionierung ein.

Bestimmen Sie dann die Breite und Höhe des Containers, z. B. eine Ebene mit einer Breite von 500 und einer Höhe von 300.
Stellen Sie dann die Ränder des Containers ein Ebene

 p{   
        width:500px;   
        height:300px;   
        margin:-150px 0 0 -250px;   
        position:absolute;   
        left:50%;   
        top:50%;   
        background-color:#000;   
}

Methode 2

Das übergeordnete Element und das untergeordnete Element schweben dann gleichzeitig nach links Das übergeordnete Element bewegt sich relativ dazu um 50 % nach links, und dann bewegt sich das untergeordnete Element relativ dazu um 50 % nach rechts, oder das untergeordnete Element bewegt sich relativ dazu nach links. Bewegen Sie sich einfach um -50 %.

<!DOCTYPE html><html><head>   
    <title>Demo</title>   
    <meta charset="utf-8"/>   
    <style type="text/css">   
        .p{   
            position:relative;   
            left:50%;   
            float:left;   
        }   
        .c{   
            position:relative;   
            float:left;   
            rightright:50%;   
        }   
    </style></head><body>   
    <p class="p">   
        <h1 class="c">Test Float Element Center</h1>   
    </p>   
</body>   
</html>

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur Verwendung von CSS zum Zentrieren schwebender 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：Grundlegendes CSS-Tutorial: CSS-Bild- und Textmischung, Bildsignatur, Zusammenfügen mehrerer Bilder und Beispiele für BildspezialeffekteNächster Artikel：Grundlegendes CSS-Tutorial: CSS-Bild- und Textmischung, Bildsignatur, Zusammenfügen mehrerer Bilder und Beispiele für Bildspezialeffekte

In Verbindung stehende Artikel

Mehr sehen