Einführung in die Methode zur Verwendung von CSS zum Zentrieren schwebender Elemente-CSS-Tutorial-php.cn

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

高洛峰

Freigeben： 2017-03-10 11:02:14

Original

1966 Leute haben es durchsucht

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!