垂直對齊

Question

我有一排內的兩列，COL-LG-8和col-LG-4，

我已經存儲在COL-LG-8，和內部的影像col-lg-4我有文字和另一個小圖片。我希望它做的是右邊的列，文本和圖像在頁面中間垂直對齊，而不管右邊的照片大小。如果頁面縮小，那麼我希望文本位於圖像下方，圖像和文本之間只有大約50px的填充。

我一直在使用inline-block的嘗試，但還沒有爲我工作至今

這是到目前爲止我的代碼：

<div class="row"> 
<div class= "col-lg-8"> 
    <img src=".../../2.jpg" class="img-responsive"> 
</div> 

<div class= "col-lg-4 inline-block"> 
    <h3 style="vertical-align: middle; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non volutpat lorem. Etiam ac suscipit nisi, id porttitor ante. Suspendisse erat velit, congue vel ante in, fermentum porta arcu. Donec enim velit, ultrices sed orci vitae, maximus tincidunt quam. Nullam at nulla velit. Etiam commodo quam quis nisi hendrerit, sit amet rhoncus felis euismod. Nulla sed semper enim. Nunc in arcu ac diam malesuada pellentesque sed et tellus. Aenean lobortis, elit ut sollicitudin maximus, justo leo volutpat arcu, vitae sodales nisi lectus at lacus. Maecenas id placerat mi. Sed tristique tempor finibus.</h3> 
    <img src="../../3.jpg> 
</div> 
</div> 

Answer 1

對於垂直對齊屬性，你需要設置顯示器父div的屬性爲'table'和'table-cell'給內部div。

垂直對齊元素的另一種方法是通過絕對定位。

.parent { 
 
    height: 300px; 
 
    width: 100%; 
 
    background: lightgrey; 
 
    position: relative; 
 
} 
 

 
.child, 
 
.image { 
 
    height: 200px; 
 
    width: 250px; 
 
    background: grey; 
 
    position: absolute; 
 
    left: 50%; 
 
    top:50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#text { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    margin: 0; 
 
}

<div class="parent"> 
 

 
    <div class="child"> 
 

 
    <h3 id="text">Text alignment</h3> 
 

 
    </div> 
 

 
</div>

你可以用它來垂直對齊整個DIV（在你的情況下，圖像和文本），並使用獨立的媒體查詢的移動設備。

@media screen and (max-width: 991px) 
    { 

    #text{ 
     display: block; 
     position: static; 
     margin-top: 50px; 
    }