时间戳

首页 > 解决方案 > 对齐图像

html - 对齐图像

问题描述

我正在一个网站上工作，该网站需要一个以左侧 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/

标签： htmlcssimagebootstrap-4

解决方案

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

访问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>

推荐阅读