Vertikales Ausrichten von zwei Spalten Layout auf 100% Breite Bild

Question

Ich habe ein Szenario wie dieses, wo ich ein Bild mit der Breite 100% als Hintergrund haben möchte. Als nächstes möchte ich einen zweispaltigen Layout-Text in der Mitte des Bildes ausrichten. Ich benutze Anzeigetabellenzelle und vertikale Ausrichtung: Mitte und es funktioniert nicht wie erwartet.

JS fiddle here

Erwartetes Ergebnis ist das zweispaltige Layout in der Mitte. Hinweis: Das Bild muss als Hintergrund mit einer Breite von 100% und einer Höhenskala entsprechend der Browserbreite dienen.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div style="position: relative;"> 
 
    <img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" /> 
 
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"> 
 
    <div style="display: table; vertical-align: middle; padding-top: 100px;"> 
 
     <div style="display: table-cell; width: 120px;"> 
 
     Left Column 
 
     </div> 
 
     <div style="display: table-cell;"> 
 
     <p> 
 
      Right Column Top 
 
     </p> 
 
     <p> 
 
      Right Column Bottom 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Wenn flexbox ist eine Option, kann es leicht in der Tabelle durchgeführt werden entfernt und mit dieser:

display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100%; 

Bitte beachte, dass ich die Inline-Stil entfernt und hinzugefügt in Klassen für die Illustration:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100%; 
 
}

<div style="position: relative;"> 
 
    <img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" /> 
 
    <div class="container"> 
 
    <div class="wrapper"> 
 
     <div style="width: 120px;"> 
 
     Left Column 
 
     </div> 
 
     <div> 
 
     <p> 
 
      Right Column Top 
 
     </p> 
 
     <p> 
 
      Right Column Bottom 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Wenn Sie mit Tabellen halten möchten, hier ist die Lösung:

1. hinzufügen height: 100% zu table und vertical-align: middle zum table-cell s auch für die vertikale Ausrichtung.

2. Fügen Sie margin: 0 auto für die horizontale Ausrichtung hinzu.

Demo unter:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
.wrapper { 
 
    display: table; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
} 
 
.wrapper > div { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.wrapper > div:first-child { 
 
    width: 120px; 
 
}

<div style="position: relative;"> 
 
    <img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" /> 
 
    <div class="container"> 
 
    <div class="wrapper"> 
 
     <div> 
 
     Left Column 
 
     </div> 
 
     <div> 
 
     <p> 
 
      Right Column Top 
 
     </p> 
 
     <p> 
 
      Right Column Bottom 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Wie dies ?, der Text wird nun auch zentriert ist, entfernt die I padding-top, so dass die Zellen, die sowohl vertikal als auch horizontal zentriert sind: jsfiddle

<div style="position: relative;"> 
    <img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" /> 
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"> 
     <div style="display: table; vertical-align: middle; width:100%;text-align:center;height:100%"> 
      <div style="display: table-cell; vertical-align: middle;"> 
       Left Column 
      </div> 
      <div style="display: table-cell; vertical-align: middle;"> 
       <p> 
        Right Column Top 
       </p> 
       <p> 
        Right Column Bottom 
       </p> 
      </div> 
     </div> 
    </div> 
</div>