对齐图像答案

【问题标题】：Alignment image对齐图像
【发布时间】：2020-06-04 20:31:06
【问题描述】：

我正在开发一个网站，该网站需要以左侧 div 为中心的图像，以右侧 div 为中心并带有背景。

我尝试了一个通用的解决方案，但由于某种原因，它不起作用。它也必须是响应式的，所以我在这里有点不知所措。有关示例，请参见我的小提琴。

<div class="container-fluid">
 <div class="row">
<div class="col-12 col-sm-6">
  <div class="leftSide">
    <img src="https://images.pexels.com/photos/3755760/pexels-photo-3755760.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid imgLeft">
  </div>
</div>
<div class="col-12 col-sm-6">
  <div class="rightSide">
    <h3>
    Some text
    </h3>
    <p>
    Some more text 
    </p>
   <button type="button" class="btn btn-primary">Some text</button>
  </div>
</div>

https://jsfiddle.net/Onno0297/grvwxby2/1/

【问题讨论】：

这是引导程序吗？你需要这样标记它。
你能说得更具体点吗？您需要两张图片，一张在右侧 div 中，另一张在左侧 div 中。两者都居中。这是你需要的吗？

标签： html css image bootstrap-4

【解决方案1】：

如果我正确理解您的问题，那么下面的代码将起作用。

访问https://jsfiddle.net/alishapatel/n3ap1vjo/4/！

.leftSide {
  height: 100%;
  display: flex;
  align-items: center;
}

.rightSide {
  background: #313131;
  height: 546px;
  color: #fff;
}

.rightSide h3 {
  text-align: center;
  padding-top: 200px;
}

.rightSide p {
  text-align: center;
}
.btn.btn-primary {
  margin: 0 auto;
  display: block;
}

.imgLeft {
  max-height: 400px;
  max-width: 300px;
  margin: 0 auto;
  width: 100%;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-6">
      <div class="leftSide">
        <img src="https://images.pexels.com/photos/3755760/pexels-photo-3755760.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid imgLeft">
      </div>
    </div>
    <div class="col-12 col-sm-6">
      <div class="rightSide">
        <h3>
        Some text
        </h3>
        <p>
        Some more text 
        </p>
       <button type="button" class="btn btn-primary">Some text</button>
      </div>
    </div>
  </div>
</div>

【讨论】：