Question

尝试了两种方法来实现响应式图像旁边的垂直对齐文本，每种方法都在一个单独的.col-md- *

中

在子元素

上

 .vcenter {
  min-height: 400px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
float: none;
}

和使用table-cell方法的父子

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}

但是左边的图像是响应的，如何在没有固定高度的情况下开始工作。

小提琴：https://jsfiddle.net/silko/jr3b8kL5/13/

Answer 1

只需将line-height: 400px;添加到.child类，它就会使文本垂直居中。

注意：您可以使用calc和vw和vh使其灵活，例如line-height: calc(30vw + 30vh);

.vcenter {
  min-height: 400px;
  display: table-cell;
  vertical-align: middle;
  border: 1px solid red;
  float: none;
}

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}
p{
  display: table-cell;
  height: 400px;
  vertical-align: middle;
}

  <div class="col-sm-6">
    <picture><img src="http://placehold.it/400x400" class="ccm-image-block img-responsive bID-214"></picture>
  </div>
  <div class="col-sm-6">
    <div class="parent">
      <div class="ccm-custom-style-main49 child">
        <p>vertical center text when more than one lineihfoiwvowiWOiehfiwhfpwHFPwofhpofhpfhpifhhvciuvcivuwcviwucvwicuwvcwiucvcwuicvwicvwicuwvcwicuvwicuvwicvwciuwcviwcuwv</p>
      </div>
    </div>
  </div>
</div>

更新：如果您的文字包含多行，则应将文本容器的display属性设置为table-cell，然后您可以设置vertical-align: middle。

在.col-md- *中的响应图像旁边的垂直对齐文本

1 个答案: