cross-browser vertikal zentrieren äußere divs von 3-Items horizontale Größe Array ändern

Ich versuche, eine einfache, in sich geschlossene responsive-Seite mit drei Spalten Inhalt zu erstellen. Der mittlere hat ein Bild mit voller Höhe, der äußere einen grundlegenden HTML-Inhalt (Textabsätze und ein Bild). Der äußere Spalteninhalt sollte im sichtbaren Fenster vertikal zentriert sein.cross-browser vertikal zentrieren äußere divs von 3-Items horizontale Größe Array ändern

Dieser Code tut alles, was er braucht, außer dem vertikalen Zentrieren des Inhalts der äußeren (ganz links und ganz rechts) divs. Grundsätzlich bleibt der Inhalt oben hängen ... jeder Vorschlag (möglicherweise mit tatsächlichem Code, da ich ein Neuling bin)? Vielen Dank!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>title</title> 
<style> 
.wrapper{ 
    width: 100%; 
    height: 99vh; 
    margin: 0 auto; 
    display: flex; 
    flex-wrap: nowrap; 
-webkit-flex-direction: row; 
    flex-direction: row; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
} 

.wrap-item{ 
    width: 33%; 
    height: 100%; 
    display: inline-block;  
} 

.wrap-img{ 
    width: 33%; 
    height: 100vh;  
} 

#im { 
    background-image: url("url"); 
    background-repeat: no-repeat; 
    background-size: contain; 
} 
.auto-style1 { 
    border-width: 0px; 
} 
</style>  
</head>  
<body>  
    <div class="wrapper"> 
     <div class="wrap-item" style="vertical-align:middle">     
      <p>content </p>  
     </div> 
     <div class="wrap-item" id="im"></div> 
     <div class="wrap-item" style="vertical-align:middle">    
      <p>content</p> 
     </div> 
    </div>  
</body> 
</html>

Quelle

2016-10-21 Marta

die Änderungen, die ich gemacht waren div#im die Klasse .wrap-img statt .wrap-item zu geben. Außerdem habe ich die Eigenschaft height:100% von .wrap-item entfernt, so dass die Wrap-Item-divs nur so groß wie ihre Inhalte sind.

Hinweis: Ich gab #im einen roten Hintergrund, damit Sie es sehen können.

.wrapper{ 
 
    width: 100%; 
 
    height: 99vh; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
-webkit-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
} 
 

 
.wrap-item{ 
 
    width: 33%; 
 
    display: inline-block;  
 
} 
 

 
.wrap-img{ 
 
    width: 33%; 
 
    height: 100vh; 
 
    display:inline-block; 
 
} 
 

 
#im { 
 
    background-image: url("url"); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background:#f00; 
 
} 
 
.auto-style1 { 
 
    border-width: 0px; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
 
<title>title</title>  
 
</head>  
 
<body>  
 
    <div class="wrapper"> 
 
     <div class="wrap-item" style="vertical-align:middle"> 
 
      <p>content</p>  
 
     </div> 
 
     <div class="wrap-img" id="im"> 
 
     </div> 
 
     <div class="wrap-item" style="vertical-align:middle">  
 
      <p>content</p> 
 
     </div> 
 
    </div>  
 
</body> 
 
</html>

Quelle

2016-10-24 17:25:29 Carp

cross-browser vertikal zentrieren äußere divs von 3-Items horizontale Größe Array ändern

Antwort

Verwandte Themen