Question

我希望3 img在水平线上并居中，请帮忙吗？

我的代码： HTML：

<div class="sidBilder">
    <div class="row">
      <div class="col-sm-12">
        <div class="row">

          <div class="col-sm-12 col-lg-4">
            <img class="img-fluid imgCenter" src="img/gapamatch.jpg">
            <img class="img-fluid imgCenter" src="img/laget18.jpg">
            <img class="img-fluid imgCenter" src="img/Kamratgarden.jpg">
        </div>


       </div> 
    </div>   
  </div> 
</div>

的CSS：我不知道在这里写些什么来使它居中并且在水平线上？

Answer 1

这是一种方法：在一个水平线上有3个不同大小的图片并居中。

.background {
 background-color : lightpink;
}

img {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="row background">
          <div class="col-4 wrapper">
            <img class="img-fluid imgCenter" src="https://picsum.photos/200/300">
          </div>
          <div class="col-4 wrapper">
            <img class="img-fluid imgCenter" src="https://picsum.photos/300/400">
          </div>
          <div class="col-4 wrapper">
            <img class="img-fluid imgCenter" src="https://picsum.photos/500/200">
          </div>
       </div> 
    </div>   
  </div> 
</div>

这是你在找什么？

以水平线为中心三个图像

1 个答案: