如何在中間對齊3個div？

Question

我旁邊有3個彼此div但他們不是很漂亮的神韻：。 他們傾向於頂部，而不是中間。

我想要什麼：

現在是什麼：

正如你可以看到，當前的不神韻：非常good.The段落需要更高等。這可能看起來像一個微妙的東西，但是當你在不同尺寸的屏幕上打開它時，它看起來很無組織和混亂。

所以基本上如何使它看起來像第一張圖片？

任何人有想法？

.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

我會用一個Flexbox的方法，那麼你可以垂直對齊容器的孩子，在代碼中的註釋：

.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>