制作图像和填充响应式引导程序

Question

有人可以帮我制作我的图像和周围的填充物 响应？我尝试填充%而不是px，我将img-fluid类添加到我的图片中。它在某种程度上起作用，但是如果我让窗户太宽，我的图像偏离中心：

如果屏幕不宽，图像可以正常工作：

HTML：

  <div class="Aligner">
      <div class="Aligner-item">

  <div>
      <div class="card authenticationRequest" style="">
        <div class="card-header-img">
          <img class="card-img-top mainImage img-fluid" src="https://i.pinimg.com/736x/bc/be/e6/bcbee6931f71db0d1629355bd61fe8cd--wolves-mans.jpg" alt="Smiley face" height="42" width="42">
        </div>
        <div class="card-block">
          <p>Hi</p>
          <p>Hello</p>
          <p>Its</p>
          <p>Me</p>
        </div>
      </div>
    </div>
    </div>
  </div>

CSS：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2%;
}

.Aligner-item {
  width: 50%;
}

.mainImage {
  height: 400px;
  width: 300px;
}

.card-header-img {
  background-color: #cf0000;
  /* padding: 40px 20px 40px 20px; */
  padding: 10% 10% 10% 10%
}

有人可以帮忙吗？这是我的傻瓜：

https://jsfiddle.net/DTcHh/38370/

提前致谢!!!

Answer 1

添加保证金：0px auto;

.card-header-img {
  background-color: #cf0000;
  padding: 10% 10% 10% 10%;
  margin: 0px auto;
}

它有效