Question

我在一行中有两列，col-lg-8和col-lg-4，

我有一个存储在col-lg-8中的图像，而在col-lg-4中我有文本和另一个小图像。我想要它做的是右边的列与文本和图像在页面中间垂直对齐，无论右边的照片大小。如果页面缩小，那么我希望文本在图像下方，图像和文本之间只有大约50px的填充。

我尝试过使用内联块，但到目前为止还没有对我有用

到目前为止，这是我的代码：

<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的display属性设置为＆＃39; table＆＃39;和＆＃39; table-cell＆＃39;内心的div。

垂直对齐元素的另一种方法是绝对定位。

＆＃13;

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

＆＃13;

<div class="parent">

  <div class="child">

    <h3 id="text">Text alignment</h3>

  </div>

</div>

＆＃13;

您可以使用它来垂直对齐整个div（在您的情况下是图像和文本），并为移动设备使用单独的媒体查询。

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

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

列内所有内容的垂直对齐

1 个答案: