垂直对齐

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; 
    }