垂直對齊（內嵌，中間）與圖像和文字divs

Question

我只想對齊兩個div彼此相鄰，並在每個垂直中間對齊內容。任何幫助可以挽救我的心理健康。這裏是我的代碼：

.main-kozossegitag-container { 
 
\t display: block; 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 

 
.main-kozossegitag-text1 { 
 
\t display: inline-block; 
 
\t width: 60%; 
 
\t height: 100%; 
 
\t vertical-align: middle; 
 
\t text-align: right; 
 
} 
 

 
.main-kozossegitag-nev { 
 
\t font-size: 2em; 
 
} 
 

 
.main-kozossegitag-title { 
 
\t font-size: 1em; 
 
} 
 

 
.main-kozossegitag-visszhang { 
 
\t font-size: 1em; 
 
} 
 

 
.main-kozossegitag-image1 { 
 
\t display: inline-block; 
 
\t width: 39%; 
 
} 
 

 
.profilkep { 
 
    max-width: 100%; 
 
\t height: auto; 
 
\t border-radius: 50%; 
 
\t border: 3px solid rgba(255,255,255,0.5); 
 
\t box-shadow: 1px 1px 5px rgba(0,0,0,0.3); 
 
}

<div class="main-kozossegitag-container"> 
 
    <div class="main-kozossegitag-text1"> 
 
    <h3 class="main-kozossegitag-nev">Rita</h3> 
 
    <p class="main-kozossegitag-title">CEO</p> 
 
    <p class="main-kozossegitag-visszhang">Lorem ipsum dolor sit amet.</p> 
 
    </div> 
 
    <div class="main-kozossegitag-image1"> 
 
    <img src="http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/szabo_rita.jpg" alt="Szabó Rita" class="profilkep"> 
 
    </div> 
 
</div>

正如你所看到的兩個div是彼此相鄰，但我不能在中間:(

Answer 1

.main-kozossegitag-container { 
 
\t display: table; 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 

 
.main-kozossegitag-text1 { 
 
\t display: table-cell; 
 
    vertical-align : middle; 
 
\t width: 60%; 
 
\t height: 100%; 
 
\t vertical-align: middle; 
 
\t text-align: right; 
 
    
 
} 
 

 
.main-kozossegitag-nev { 
 
\t font-size: 2em; 
 
    
 
} 
 

 
.main-kozossegitag-title { 
 
\t font-size: 1em; 
 
} 
 

 
.main-kozossegitag-visszhang { 
 
\t font-size: 1em; 
 
} 
 

 
.main-kozossegitag-image1 { 
 
\t display: table-cell; 
 
    vertical-align : middle; 
 
\t width: 39%; 
 
    
 
} 
 

 
.profilkep { 
 
    max-width: 100%; 
 
\t height: auto; 
 
\t border-radius: 50%; 
 
\t border: 3px solid rgba(255,255,255,0.5); 
 
\t box-shadow: 1px 1px 5px rgba(0,0,0,0.3); 
 
}

<div class="main-kozossegitag-container"> 
 
    <div class="main-kozossegitag-text1"> 
 
    <h3 class="main-kozossegitag-nev">Rita</h3> 
 
    <p class="main-kozossegitag-title">CEO</p> 
 
    <p class="main-kozossegitag-visszhang">Lorem ipsum dolor sit amet.</p> 
 
    </div> 
 
    <div class="main-kozossegitag-image1"> 
 
    <img src="http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/szabo_rita.jpg" alt="Szabó Rita" class="profilkep"> 
 
    </div> 
 
</div>

我添加display : table;到您的主容器（main-kozossegitag-text1）和display : table-cell; vertical-align : middle你的兩個子DIV。這些屬性讓它們具有與包含垂直對齊內容的表格和單元格相同的行爲。我只是混淆了一些左/右邊緣，但其餘的似乎工作。

Answer 2

垂直對齊文本添加的在垂直對準到第二本部

.main-kozossegitag-image1 { 
    display: inline-block; 
    width: 39%; 
    vertical-align: middle; 
} 

Answer 3

只需添加一個浮動留給這個div：

.main-kozossegitag-text1{ display: table-cell; vertical-align : middle; width: 60%; height: 100%; vertical-align: middle; text-align: right; float: left; }

Answer 4

請看看我的小提琴here。

我使用了CSS3柔性盒模型。我改變屬性這些類：

.main-kozossegitag-container { 
    display: flex; 
    align-items: stretch; 
    flex-flow: row wrap; 
    width: 100%; 
    height: 100%; 
    border: 1px solid red; 
} 

.main-kozossegitag-text1 { 
    display: flex; 
    flex-flow: column wrap; 
    justify-content: center; 
    align-items: flex-end; 
    align-content: flex-end; 
    box-sizing: border-box; 
    width: 60%; 
    padding-right: 20px; 
} 

更多關於CSS3彈性盒here。