如何在css中垂直对齐响应图像

Question

我无法在其容器内垂直居中响应图像。

我尝试了一些东西，但这些都是固定大小的，而不是响应式的。

我正在使用 Bootstrap 4。

在我的代码下方并尝试使用 line-height

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-7 img-container" style="line-height:100%">
      <img src="sample.jpg" alt="Sample" class="img-fluid">
    </div>
    <div class="col-md-5">
      <h3>Title 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aperiam, sit placeat corporis architecto praesentium facere aut rem quis odio ab voluptates sunt, eum harum ipsam, fugit numquam aliquid laboriosam.</p>
      <h3>Title 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aperiam, sit placeat corporis architecto praesentium facere aut rem quis odio ab voluptates sunt, eum harum ipsam, fugit numquam aliquid laboriosam.</p>
      <h3>Title 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aperiam, sit placeat corporis architecto praesentium facere aut rem quis odio ab voluptates sunt, eum harum ipsam, fugit numquam aliquid laboriosam.</p>
    </div>
  </div>
</div>

Answer 1

由于您使用的是 Bootstrap，因此您可以将 d-flex align-items-center 添加到您的 col-md-7 div。这将强制列使用CSS flex box for layout，并且 align-items-center 告诉内容垂直定位。

Answer 2

你可以使用弹性盒子。对于图像的容器，编写以下代码

.yourContainer{
  display:flex;
  justify-content:center;

}

Answer 3

如果你想自己做，你可以试试这个。 首先，您必须为图像的容器添加其他类

<div class="container">
    <div class="row">
        <div class="col-md-7 wrapper-img" style="line-height:100%">
            <img src="sample.jpg" alt="Sample" class="img-fluid">
        </div>
        <div class="col-md-5">
            <h3>Title 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aperiam, sit placeat corporis architecto praesentium facere aut rem quis odio ab voluptates sunt, eum harum ipsam, fugit numquam aliquid laboriosam.</p>
            <h3>Title 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aperiam, sit placeat corporis architecto praesentium facere aut rem quis odio ab voluptates sunt, eum harum ipsam, fugit numquam aliquid laboriosam.</p>
            <h3>Title 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aperiam, sit placeat corporis architecto praesentium facere aut rem quis odio ab voluptates sunt, eum harum ipsam, fugit numquam aliquid laboriosam.</p>
        </div>
    </div>
</div>

在 style.css 中

.wrapper-img{   
   display:flex;
   align-items: center;
}

Answer 4

bootstrap 带有你可以使用的内置类，col 上的 d-flex 和 img 上的 m-auto 都可以：

.row {border:solid}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-7 d-flex " style="line-height:100%">
            <img src="http://dummyimage.com/100&text=sample.jpg" alt="Sample" class="img-fluid m-auto">
        </div>
        <div class="col-md-5">
            <h3>Title 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aperiam, sit placeat corporis architecto praesentium facere aut rem quis odio ab voluptates sunt, eum harum ipsam, fugit numquam aliquid laboriosam.</p>
            <h3>Title 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aperiam, sit placeat corporis architecto praesentium facere aut rem quis odio ab voluptates sunt, eum harum ipsam, fugit numquam aliquid laboriosam.</p>
            <h3>Title 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aperiam, sit placeat corporis architecto praesentium facere aut rem quis odio ab voluptates sunt, eum harum ipsam, fugit numquam aliquid laboriosam.</p>
        </div>
    </div>
</div>

文档：https://getbootstrap.com/docs/4.0/utilities/spacing/ & https://getbootstrap.com/docs/4.0/utilities/display/