✔ Div zwei mal vertikal zentrieren

[achterbahnfreak]

Hi zusammen,

ich habe ein div (.content) mittels vertical-align: middle vertikal zentriert. Klappt auch ganz gut, doch wie stelle ich es an, dass ein weiteres div (.head) vertikal zwischen .content und dem Seitenanfang zentriert ist?

 

[SpiceLab]

Könntest du bitte auch deinen bisherigen HTML- und CSS-Code zeigen?

 

[achterbahnfreak]

<div class="wrapper">
       <div class="head">
           <img src="images/logo_white.png" class="logo">
       </div>
       <div class="table">
         <div class="content">
           TextTextText
         </div>
       </div>
</div>

.table {
   display: table;
   max-width: 800px;
   height: 100%;
   position: absolute;
   margin-left: -400px;
   left: 50%;
   z-index: 50;
}
.content {
   width: 100%;
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

 

[SpiceLab]

Vielleicht stellst du dir das so vor:

<div class="wrapper">
  <div class="table">
    <div class="head">
      <img src="images/logo_white.png" class="logo">
    </div>
  </div>
  <div class="table">
    <div class="content">
      TextTextText
    </div>
  </div>
</div>

html,body,.wrapper {
  height:100%;
  margin:0
}
.table {
  display:table;
  max-width:800px;
  height:50%;
  margin:auto
}
.head,.content {
  width:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center
}

 

[achterbahnfreak]

Nee ich meine es so, wie im Bild dargestellt.

* vertikal zu Anfang der Seite und Content zentriert

 

[SpiceLab]

Gib mal probeweise in deinem CSS der Klasse .content eine Hintergrundfarbe, damit du erkennst, wo die Box tatsächlich beginnt, und wie weit sie sich nach unten erstreckt - wegen height:100% außerhalb des Viewports.

Nicht die Box ist vertikal zentrtiert, sondern lediglich ihr Inhalt.

 

[achterbahnfreak]

Gib mal probeweise in deinem CSS der Klasse .content eine Hintergrundfarbe, damit du erkennst, wo die Box tatsächlich beginnt, und wie weit sie sich nach unten erstreckt - wegen height:100% außerhalb des Viewports.

Nicht die Box ist vertikal zentrtiert, sondern lediglich ihr Inhalt.

Die Box fängt oben am Seitenrand an und geht wegen dem height:50%; bei .table nur bis zur Hälfte des Viewports.

Und bei height: 100%; geht sie bis zum Ende des Viewports/Browsers.

 

[SpiceLab]

Die Box fängt oben am Seitenrand an und geht wegen dem height:50%; bei .table nur bis zur Hälfte des Viewports.

In meinem Fall. Ich rede aber von deinem Modell, und darin sieht's ganz anders aus.

 

[achterbahnfreak]

In meinem Fall. Ich rede aber von deinem Modell, und darin sieht's ganz anders aus.

Da schaut es genau so aus.

 

[SpiceLab]

Da schaut es genau so aus.

Mit deinem Code stellt sich das logischerweise nicht genau so dar!

Man beachte auch den vertikalen Scrollbalken, den .table mit height:100% erzeugt!