So legen Sie fest, dass das Element in CSS horizontal, vertikal und zentriert angezeigt wird

Lassen Sie uns zunächst die folgenden zwei Attribute einführen:

1 dient dazu, die horizontale Ausrichtung des Texts im Element festzulegen.

Es funktioniert auf Text, steuert Text und hat keine Auswirkung auf Blockelemente. Es kann nur den Inhalt in Blockelementen (z. B. den Text im p-Tag: Zentrieren Sie den Text im p-Tag) relativieren Blockelemente werden zentriert.

2. Bei der vertikalen Ausrichtung wird die vertikale Ausrichtung von Elementen festgelegt.

Es funktioniert bei Elementen; es kann nur bei Inline- oder Inline-Blockelementen funktionieren. Dieses Attribut wird relativ zur Grundlinie ausgerichtet. Lassen Sie uns die Grundlinie vorstellen.

Wie stelle ich ein Element so ein, dass es im übergeordneten Element horizontal und vertikal zentriert angezeigt wird?

1. Schreiben Sie das text-align-Attribut in sein übergeordnetes Element.

2 3. Fügen Sie dem zu zentrierenden Element das Attribut „Vertical-Align“ hinzu.

4. Fügen Sie ein „Lineal“ hinzu, bei dem es sich um ein Geschwisterelement (Span usw.) handelt miteinander.

(Empfohlenes Video-Tutorial:

CSS-Video-Tutorial

)

Hinweis:

Das Lineal muss die folgenden Attribute hinzufügen:

Anzeige: inline-block;

Breite: 0 (der Zweck besteht darin, das Lineal auszublenden)

Höhe: 100 % (die gleiche Höhe wie das übergeordnete Element, das Mittellinienposition ist die Mittelposition);

<div class="div1">div1
    <div class="div1-1">div2</div><span></span>
</div>

CSS-Teil:

*{
    margin: 0;
    padding: 0;
}
.div1{
    width: 200px;
    height: 150px;
    background: blue;
    margin: 20px 20px;
    text-align: center;
}
.div1-1{
    width: 100px;
    height: 100px;
    background: red;
    display: inline-block;
    vertical-align: middle;
}
.div1 span{
    display: inline-block;
    width: 0px;
    height: 100%;
    background: #0681D0;
    vertical-align: middle; 
}

Rendering:

Empfohlenes Tutorial:

CSS-Basis-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie fest, dass das Element in CSS horizontal, vertikal und zentriert angezeigt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!