Question

我有2个bootstrap col-md-6列，其中一个有一个图像，另一个有一个p标签，里面有一段文字。我将如何动态垂直对齐文本，使其与旁边的图像相比完美，代码如下

<div class="col-md-6">
    <img class="img-responsive" src="https://picsum.photos/550/430" >
</div>
<div class="col-md-6">
    <p>text goes here</p>
</div>

我还需要能够对一个可能有3个标签的列做同样的事情，所以h3 p和一个标签。

Answer 1

如果您使用的是V4引导程序，则只需依赖某些class utilities并使用align-items-center即可实现此目的：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row align-items-center">
    <div class="col">
      <img class="img-responsive" src="https://lorempixel.com/400/200/">
    </div>
    <div class="col">
      <p>text goes here</p>
    </div>
  </div>
</div>

具有垂直对齐文本的Bootstrap列

1 个答案: