Center div vertikal je nach Inhalt

Question

Hallo Ich habe eine Frage bezüglich der Zentrierung eines div vertikal. Lassen Sie mich das anhand eines Codes erklären. Ich habe den folgenden HTML-Code:

<div class="container"> 

    <div class="wrapper"> 
     <div class="content"> 
      <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
      <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       </p> 
     </div> 
     <div class="button_wrapper"> 
      <a class="button" href="#"></a> 
     </div> 
    </div> 

    <!-- LARGE CONTENT --> 
    <div class="wrapper"> 
     <div class="content"> 
      <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque porta cursus. Fusce ut nisi eget enim vestibulum pulvinar ac vehicula purus 
       </p> 
     </div> 
     <div class="button_wrapper"> 
      <a class="button" href="#"></a> 
     </div> 
    </div> 

</div> 

Wenn man sich meine DEMO Sie werden sehen, dass die gelbe div schwimmt, und das ist genau das, was ich will.

Was I ist die folgende Konfiguration erreichen wollen:

Ich habe versucht, einige Dinge wie die Polsterung/Marge als Wahrnehmungs Zahl einstellen, aber das hat nicht funktioniert. Ist es sogar nur mit CSS möglich?

Answer 1

mehrere Methoden Es gibt, von denen keine float verwenden. Hier ein paar ....

Inline-Block/vertical-align

body{background-color:#fff;} 
 
.container{ 
 
    width:555px; 
 
} 
 
.wrapper { 
 
    background-color: #eeeeee; 
 
    float: left; 
 
    margin-bottom: 10px; 
 
    padding: 10px 10px; 
 
    clear: both; 
 
    width: 100%; 
 
} 
 
.content{ 
 
    background-color:red; 
 
\t width:89%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    color:#fff; 
 
} 
 
.button_wrapper{ 
 
    background-color: yellow; 
 
    width: 10%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin-left: -.25em; 
 
} 
 
.button{ 
 
    background-image: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-48.png); 
 
\t background-repeat:no-repeat; 
 
\t display:block; 
 
\t width:48px; 
 
\t height:48px; \t 
 
\t background-position:center; 
 
    
 
}

<div class="container"> 
 

 
    <div class="wrapper"> 
 
     <div class="content"> 
 
      <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
 
      <p> 
 
\t \t \t  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
\t \t  </p> 
 
     </div> 
 
     <div class="button_wrapper"> 
 
      <a class="button" href="#"></a> 
 
     </div> 
 
    </div> 
 
    
 
    <!-- LARGE CONTENT --> 
 
    <div class="wrapper"> 
 
     <div class="content"> 
 
      <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
 
      <p> 
 
\t \t \t  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque porta cursus. Fusce ut nisi eget enim vestibulum pulvinar ac vehicula purus 
 
\t \t  </p> 
 
     </div> 
 
     <div class="button_wrapper"> 
 
      <a class="button" href="#"></a> 
 
     </div> 
 
    </div> 
 

 
</div>

Flexbox

body{background-color:#fff;} 
 
.container{ 
 
    width:555px; 
 
} 
 
.wrapper { 
 
    background-color: #eeeeee; 
 
    display: flex; 
 
    align-items: center; 
 
    margin-bottom: 10px; 
 
    padding: 10px 10px; 
 
    clear: both; 
 
    width: 100%; 
 
} 
 
.content{ 
 
    background-color:red; 
 
\t width:89%; 
 
    color:#fff; 
 
} 
 
.button_wrapper{ 
 
    background-color: yellow; 
 
    width: 10%; 
 
} 
 
.button{ 
 
    background-image: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-48.png); 
 
\t background-repeat:no-repeat; 
 
\t display:block; 
 
\t width:48px; 
 
\t height:48px; \t 
 
\t background-position:center; 
 
    
 
}

<div class="container"> 
 

 
    <div class="wrapper"> 
 
     <div class="content"> 
 
      <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
 
      <p> 
 
\t \t \t  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
\t \t  </p> 
 
     </div> 
 
     <div class="button_wrapper"> 
 
      <a class="button" href="#"></a> 
 
     </div> 
 
    </div> 
 
    
 
    <!-- LARGE CONTENT --> 
 
    <div class="wrapper"> 
 
     <div class="content"> 
 
      <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
 
      <p> 
 
\t \t \t  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque porta cursus. Fusce ut nisi eget enim vestibulum pulvinar ac vehicula purus 
 
\t \t  </p> 
 
     </div> 
 
     <div class="button_wrapper"> 
 
      <a class="button" href="#"></a> 
 
     </div> 
 
    </div> 
 

 
</div>

CSS Tabellen

body { 
 
    background-color: #fff; 
 
} 
 
.container { 
 
    width: 555px; 
 
} 
 
.wrapper { 
 
    background-color: #eeeeee; 
 
    display: table; 
 
    vertical-align: middle; 
 
    margin-bottom: 10px; 
 
    padding: 10px 10px; 
 
    clear: both; 
 
    width: 100%; 
 
} 
 
.content { 
 
    background-color: red; 
 
    width: 89%; 
 
    color: #fff; 
 
    display: table-cell; 
 
} 
 
.button_wrapper { 
 
    width: 10%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.button { 
 
    background-color: yellow; 
 
    background-image: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-48.png); 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
    width: 48px; 
 
    height: 48px; 
 
    background-position: center; 
 
}

<div class="container"> 
 

 
    <div class="wrapper"> 
 
    <div class="content"> 
 
     <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
     </p> 
 
    </div> 
 
    <div class="button_wrapper"> 
 
     <a class="button" href="#"></a> 
 
    </div> 
 
    </div> 
 

 
    <!-- LARGE CONTENT --> 
 
    <div class="wrapper"> 
 
    <div class="content"> 
 
     <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque porta cursus. Fusce ut nisi eget enim vestibulum pulvinar ac vehicula purus 
 
     </p> 
 
    </div> 
 
    <div class="button_wrapper"> 
 
     <a class="button" href="#"></a> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 2

ändern einige CSS-Eigenschaft

.wrapper { 
    position: relative; 
    background-color: #eeeeee; 
    float: left; 
    margin-bottom: 20px; 
    padding: 10px 10px; 
    clear: both; 
    width: 100%; 
} 
.button_wrapper { 
    background-color: yellow; 
    float: left; 
    position: absolute; 
    right: 8px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 10%; 
} 

https://jsfiddle.net/wvd9pddg/2/