如何在中间对齐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>