Wie ordnen Sie 3 divs in der Mitte nebeneinander?

Question

Ich habe 3 divs nebeneinander, aber sie sind nicht sehr nett alligned. Sie neigen sich nach oben anstelle der Mitte.

Was ich will:

was jetzt:

Wie Sie sehen können, ist die aktuelle nicht alligned renovierung.Diese Absätze muss höher und so weiter sein. Dies mag wie eine subtile Sache erscheinen, aber wenn Sie es in verschiedenen Größen von Bildschirmen öffnen, sieht es sehr unorganisiert und chaotisch aus.

Also im Grunde, wie man es wie das erste Bild aussehen lassen?

Wer hat Ideen?

.Capital { 
 
    margin: 0px 0 -5px 0; 
 
    line-height: 63px; 
 
    font-size: 60px; 
 
    font-weight: ligter; 
 
} 
 

 
.smalltext { 
 
    text-align: center; 
 
    margin-top: 0px !important; 
 
    font-weight: 100px; 
 
    font-size: 14px; 
 
} 
 

 
.container { 
 
    float: left; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
.left { 
 
    width: 25%; 
 
    margin: 05% 00% 00% 02%; 
 
} 
 

 
.imageleft { 
 
    float: left; 
 
} 
 

 
.paragraphs { 
 
    margin: 5% 00% 2% 00%; 
 
    width: 50%; 
 
} 
 

 
.imageright { 
 
    float: right; 
 
    margin: 02% -10% 0% 00%; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 

 
.square { 
 
    border-radius: 25px; 
 
    background: #769DBD; 
 
    padding: 20px; 
 
    width: 100px; 
 
    height: 100px; 
 
    text-align: center; 
 
    color: #fff; 
 
    font-family: Arial; 
 
    padding-top: 10px; 
 
    text-decoration: none; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    <div id="methods" class="square"><span class="Capital">M</span> 
 
     <span class="smalltext">Methods</span></div> 
 
    </div> 
 
    <div class="paragraphs"> 
 

 
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem 
 
    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem 
 

 
    </div> 
 
    <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" /> 
 

 
</div> 
 
<div class="container"> 
 
    <div class="left"> 
 
    <div id="motivation" class="square"><span class="Capital">M</span> 
 
     <span class="smalltext">Motivation</span></div> 
 
    </div> 
 
    <div class="paragraphs"> 
 

 
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem 
 
    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem 
 

 
    </div> 
 
    <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" /> 
 

 
</div>

Answer 1

Ich würde einen Flexbox Ansatz verwenden, dann können Sie vertikal, um die Kinder des Behälters, Kommentare in Code ausrichten:

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    align-items: center; /* this vertically aligns the contents */ 
 
    justify-content: space-between; 
 
    margin-bottom: 20px; 
 
} 
 

 
.left { 
 
    width: 25%; 
 
} 
 

 
.paragraphs { 
 
    padding: 0 5%; /* space between cells */ 
 
    flex-grow: 1; /* takes rest of space, best not to use 50% in case 25% + 50% + 300px > 100% */ 
 
} 
 

 
.imageright { 
 
    width: 300px; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
     <div id="methods" class="square"><span class="Capital">M</span> 
 
      <span class="smalltext">Methods</span></div> 
 
    </div> 
 
    <div class="paragraphs"> 
 

 
     Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem 
 
     IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem 
 

 
    </div> 
 
    <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" /> 
 

 
</div> 
 
<div class="container"> 
 
    <div class="left"> 
 
     <div id="motivation" class="square"><span class="Capital">M</span> 
 
      <span class="smalltext">Motivation</span></div> 
 
    </div> 
 
    <div class="paragraphs"> 
 

 
     Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem 
 
     IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem 
 

 
    </div> 
 
    <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" /> 
 

 
</div>