Vertikal zentrieren einer div in einem anderen div

Ich versuche vertical-align: middle ein div in einem anderen div, aber aus irgendeinem Grund funktioniert es nicht richtig. Was mache ich falsch?

CSS:

#wrapper {
border: 1px solid red;
width: 500px;
height: 500px;
}
#block {
border: 1px solid blue;
width: 500px;
height: 250px;
vertical-align: middle;
}

HTML:

<div id = 'wrapper'> 
<div id = 'block'> I'm Block </div>
<div>

PS: Dies ist nur ein Beispiel, also Nein, ich weiß wirklich nicht, die tatsächliche Breite und Höhe des divs, da Sie dynamisch sind, ist nach Ihrem Inhalt, also bitte keine margin-top: 125px oder padding-top: 125px Antworten, oder Antworten wie, dass.

InformationsquelleAutor jessica | 2016-02-14

26

Den vertical-align Eigenschaft gilt nur für inline-level - und table-cell Elemente (Quelle). In Ihrem code, mit dem Sie arbeiten block-level - Elemente.

Versuchen, diese flexbox-alternative:

CSS:
```
#wrapper {
    border: 1px solid red;
    width: 500px;
    height: 500px;
    display: flex;               /* establish flex container */
    align-items: center;         /* vertically center flex items */
}

#block {
    border: 1px solid blue;
    width: 500px;
    height: 250px;
    /* vertical-align: middle; */
}
```
HTML:
```
<div id='wrapper'>
    <div id='block'> I'm Block </div>
<div>
```
Erfahren Sie mehr über flex-Ausrichtung hier: Methoden für die Ausrichtung von Flex-Elementen

Browser-Unterstützung: Flexbox-unterstützt durch alle gängigen Browser, außer IE < 10. Einige der neuesten Versionen der browser, wie Safari 8 und IE10, erfordern vendor-Präfixe. Für eine schnelle Methode zum hinzufügen von Präfixen verwenden Autoprefixer. Mehr details in diese Antwort.

InformationsquelleAutor Michael_B

Hier ist, wie ich in der Regel tun dies.

CSS:

#wrapper {
border: 1px solid red;
width: 500px;
height: 500px;
position: relative;
}
#block {
border: 1px solid blue;
width: 500px;
height: 250px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}

HTML:

<div id="wrapper">
<div id="block"></div>
</div>

Einfache Möglichkeit, um es dynamisch.

InformationsquelleAutor mattdevio

Können Sie es auf diese Weise:

#wrapper {
  border: 1px solid red;
  width: 500px;
  height: 500px;
}
#block {
  border: 1px solid blue;
  width: 500px;
  height: 250px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Hier eine live-Ansicht: https://jsfiddle.net/w9bpy1t4/

InformationsquelleAutor melalonso

Können Sie dies tun:

#block {
border: 1px solid blue;
margin:25% 0;
width: 500px;
height: 250px;
vertical-align: middle;}

Aber, es ist nicht, was Sie suchen !

oder so:

#wrapper {
border: 1px solid red;
width: 500px;
height: 500px;
display:table-cell;
vertical-align: middle;
}
#block {
border: 1px solid blue;
display:inline-block;
width: 500px;
height: 250px;
}

InformationsquelleAutor Jean-Francois Demers

wenn u wissen, die Höhe des inneren div-dann kann u mit position relative, auf wrapper und position absolute in der inneren div mit einer gewissen Marge. Also css kann man diese

#wrapper {
 border: 1px solid red;
 width: 500px;
 height: 500px;
 position: relative;
 }
#block {
 border: 1px solid blue;
 width: 500px;
 height: 250px;
 vertical-align: middle;
 position: absolute;
 margin-top: 50%;
 top: -125px;
 }

InformationsquelleAutor pawan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.