Bild vertikal in div zentrieren

Question

Im Grunde ist der Bildschirm in 2 Teile geteilt, links für das Logo, rechts für das Sponsorenbild.

Ich möchte die beiden Bilder in der Mitte des Bildschirms vertikal ausrichten. Jetzt sind die Bilder am oberen Bildschirmrand ausgerichtet. Ich verstehe nicht, wie ich es lösen soll. Kannst du einen Hinweis geben?

#logo { 
 
    float:left; 
 
    width: 50%; 
 
    height:100%; 
 
} 
 
#imgLogo { 
 
    height:100%; 
 
} 
 
#sponsor { 
 
    float:left; 
 
    width: 50%; 
 
    height:100%; 
 
    background:#ffffff; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
#imgSponsor { 
 
    max-height:90%; 
 
    max-width:90%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.app { 
 
    position:absolute; 
 
    left:0%; 
 
    top:0%; 
 
    height:100%; 
 
    width:100%; 
 
    text-align:center; 
 
}

<div class="app"> 
 
    <div id="logo"> 
 
     <img id="imgLogo" src="logo.png"> 
 
    </div> 
 

 
    <div id="sponsor"> 
 
     <a href="#"> 
 
      <img id="imgSponsor" src="http://www.foo.bar/wp-content/uploads/2017/10/foobar.jpg"> 
 
     </a> 
 
    </div> 
 
</div>

Answer 1

Hier ist eine Art und Weise Sie Ihr Layout flexbox mit nähern könnte:

body { 
 
    margin: 0; 
 
} 
 

 
.app { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 100vh; 
 
} 
 

 
.app div { 
 
    flex: 1; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="app"> 
 
    <div id="logo"> 
 
    <img id="imgLogo" src="https://unsplash.it/200x200"> 
 
    </div> 
 

 
    <div id="sponsor"> 
 
    <a href="#"> 
 
     <img id="imgSponsor" src="https://unsplash.it/200x200"> 
 
    </a> 
 
    </div> 
 
</div>

Answer 2

Das ist, wo CSS flex sehr praktisch ist:

body { 
 
    margin: 0; 
 
} 
 

 
.app { 
 
    display: flex; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    align-items: center; 
 
    justify-content: space-around; 
 
} 
 

 
#sponsor, #logo { 
 
    width: 50%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
#imgLogo { 
 
    height: 100%; 
 
} 
 

 
#imgSponsor { 
 
    max-height:90%; 
 
    max-width:90%; 
 
} 
 

 
#sponsor a { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 100%; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="app"> 
 
    <div id="logo"> 
 
     <img id="imgLogo" src="https://placehold.it/200x200"> 
 
    </div> 
 

 
    <div id="sponsor"> 
 
     <a href="#"> 
 
      <img id="imgSponsor" src="https://placehold.it/200x200"> 
 
     </a> 
 
    </div> 
 
</div>

Answer 3

Sie können diese 2 in Ihrem Code verwenden, die Ihr Bild Mitte-Mitte.

#logo { 
 
    float:left; 
 
    width: 50%; 
 
    height:100%; 
 
} 
 
#imgLogo { 
 
    height:100%; 
 
} 
 
#sponsor { 
 
    float:left; 
 
    width: 50%; 
 
    height:100%; 
 
    background:#ffffff; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
#imgSponsor { 
 
    max-height:90%; 
 
    max-width:90%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.app { 
 
    position:absolute; 
 
    left:0%; 
 
    top:0%; 
 
    height:100%; 
 
    width:100%; 
 
    text-align:center; 
 
}

<div class="app"> 
 
    <div id="logo"> 
 
     <img id="imgLogo" src="logo.png"> 
 
    </div> 
 

 
    <div id="sponsor"> 
 
     <a href="#"> 
 
      <img id="imgSponsor" src="http://www.foo.bar/wp-content/uploads/2017/10/foobar.jpg"> 
 
     </a> 
 
    </div> 
 
</div>

oder Sie verwenden können:

background-position: center center: