Question

基本上我想要的是图像以类“行”为中心，并且在图像的每一侧（左侧和右侧）都有2个文本块。

我想要的：目前我所拥有的：

当前代码：

     <section class="showcase">
      <div class="container-fluid p-0">
    <div class="row no-gutters">

      <div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('img/bg-showcase-1.jpg');"></div>
      <div class="col-lg-6 order-lg-1 my-auto showcase-text mx-auto align-middle text-center">
        <h2>Also Available On Android & iOS</h2>
        <p class="lead mb-0 mx-auto text-center"><img style="max-height: 250px; margin-right:55px;" src="img/download_buttons.svg"></img>
        </p>
      </div>
    </div>
  </div>
</section>

CSS： Bootstrap 4 和

.showcase {
  .showcase-text {
    padding: 3rem;
  }
  .showcase-img {
    min-height: 30rem;
    background-size: cover;
  }
  @media (min-width: 768px) {
    .showcase-text {
      padding: 7rem;
    }
  }
}

编辑：

我从Sunil Patel得到的答案：

我需要的是图像和文本始终处于水平位置，因此即使屏幕尺寸不同，它也会调整大小，保持水平，而不是垂直。

例如，在较小的屏幕宽度上，我的原始展示行将垂直对齐，如下所示：

但我希望它始终保持水平。

Answer 1

这里有2个问题。一个是垂直对齐中心，其中already been asked and answered before。另一个是水平调整列，可以使用Bootstrap 4 auto-layout columns来完成。

<div class="container-fluid">
    <div class="row no-gutters align-items-center text-center">
        <div class="col-sm">
            <h2>Text</h2>
        </div>
        <div class="col-sm-auto">
            <img src="//placehold.it/200x400" class="img-fluid" alt="">
        </div>
        <div class="col-sm">
            <h2>Text</h2>
        </div>
    </div>
</div>

Demo

工作原理：

col-sm-auto - 符合列内容的宽度
col-sm - 增长到同样填充行的宽度
no-gutters - 删除列之间的水平间距
text-center - 列中的水平文字
align-items-center - flexbox vertical align for row

Answer 2

我可能误解了你的问题。但这就是你要追求的吗？

<div class="container">
<div class="row justify-content-center">
    <div class="col-lg-auto">
        <h2>Test</h2>
        <p>Et qui deserunt nostrum voluptates error quod. Quia reiciendis beatae. Hic beatae molestiae illo sunt. Quis temporibus at explicabo soluta et quibusdam et rem ducimus. Libero atque velit itaque est numquam velit est dolorem dolorem. Cum quis
            qui dolor vitae delectus eaque. Ullam inventore eos dolor at sed possimus recusandae. Sunt itaque nobis fugiat et consequatur. Qui reprehenderit consequatur voluptate delectus voluptatem voluptas. Aut modi est hic. Corrupti enim dicta
            sint consequatur eum. Saepe repellat laborum dolorem voluptate aut quis molestiae deserunt autem. Est necessitatibus et id veniam eius veniam animi repellat quas.</p>
    </div>
    <div class="col-lg-auto">
        <img src="https://dummyimage.com/800x400.jpg" alt="">
    </div>
    <div class="col-lg-auto">
        <h2>Test</h2>
        <p>Et qui deserunt nostrum voluptates error quod. Quia reiciendis beatae. Hic beatae molestiae illo sunt. Quis temporibus at explicabo soluta et quibusdam et rem ducimus. Libero atque velit itaque est numquam velit est dolorem dolorem. Cum quis
            qui dolor vitae delectus eaque. Ullam inventore eos dolor at sed possimus recusandae. Sunt itaque nobis fugiat et consequatur. Qui reprehenderit consequatur voluptate delectus voluptatem voluptas. Aut modi est hic. Corrupti enim dicta
            sint consequatur eum. Saepe repellat laborum dolorem voluptate aut quis molestiae deserunt autem. Est necessitatibus et id veniam eius veniam animi repellat quas.</p>
    </div>
</div>

http://jsfiddle.net/dt81h6ff

Answer 3

<div class="row no-gutters">
<div class="col-lg-5"> text goes here </div>
<div class="col-lg-2"> image goes here </div>
<div class="col-lg-5"> text goes here </div>
</div>

Bootstrap 4：行中的图像中心，两侧有2个文本块

3 个答案: