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

Question

我在将响应式图像在其容器内垂直居中时遇到问题。

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

我正在使用 Bootstrap 4.

低于我的代码并尝试使用行高

<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

你可以使用 flexbox。对于图片的容器写如下代码

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

}

Answer 2

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

Answer 3

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

<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 带有内置的 class ，你可以使用 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/

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

How to vertically align responsive image in css

html

css

image

vertical-alignment

responsive