Detaillierte Erläuterung der CSS-Implementierung der vertikalen Zentrierung innerhalb eines Divs mit fester Breite und Höhe. Beispielfreigabe

In diesem Artikel wird hauptsächlich das detaillierte Beispiel der vertikalen CSS-Zentrierung innerhalb einer festen Breite und Höhe p vorgestellt, dh die Methode zur vertikalen Zentrierung von Elementen innerhalb von p relativ zu p. Freunde in Not können sich darauf beziehen

Anforderungsfall

Der Fall ist wie folgt: Die Höhe und Breite eines äußeren p sind festgelegt, der Inhalt im Inneren ist jedoch nicht festgelegt. Viele Freunde fügen dem Kopf einen Abstand oder einen Rand hinzu, sodass der Inhalt darin zentriert erscheint. Wenn sich der Inhalt jedoch ändert, ändert sich der feste Abstand oder Rand des Kopfes nie. Dadurch wird die vertikale Richtung nicht zentriert!

Wir wissen, dass, wenn der folgende p

<p class="outer"><p class="inner">haorooms内部内容</p></p>

-Stil so ist

.outer{text-align:center;vertical-align: middle;width:200px;height:350px;}

vertikal ausrichten :middle funktioniert nicht. Viele Freunde machen viel Aufhebens um .inner, das Hinzufügen von Rändern usw., wie ich oben sagte! Gibt es also eine bessere Lösung für diese Situation?

Lösung

Idee: Fügen Sie einen cssHack hinzu, setzen Sie die Zeilenhöhe von cssHack auf die Höhe des äußeren p, und Sie können Vertical-Align:Middle verwenden !

p ist wie folgt:

<p class="outer">   
    <p class="inner">haorooms内部内容</p><p class="v">cssHack</p>   
</p>

Der Stil ist wie folgt:

* {   
    margin: 0;   
    padding: 0;   
}   
.outer {   
    background-color: #ccc;   
    font-size: 24px;   
    height: 350px;   
    text-align: center;   
    overflow: hidden;   
    width: 280px;   
}   
.outer  .inner,   
.outer  .v {   
    display: inline-block;   
    zoom: 1;*display: inline; /* 用于触发支持IE67 inline-block */
}   
.outer  .inner {               
    line-height: 1.8;   
    padding: 0 4px 0 5px;   
    vertical-align: middle;   
    width: 262px;              
}   
.outer  .v {   
    line-height: 350px;   
    text-indent:-9999px;   
    width: 1px;            
}

Auf diese Weise , die Vertikalität innerhalb von p wird erreicht Zentriert!

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der CSS-Implementierung der vertikalen Zentrierung innerhalb eines Divs mit fester Breite und Höhe. Beispielfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!