Question

我有一张多对图像描述表。在大屏幕中，图像水平对齐。问题在于，在小屏幕（xs）中，图像未居中（文本为是）。

我尝试了此代码Center position: relative div 此解决方案使图像居中，但由于有边距，因此它在移动设备上显示为水平滚动。

HTML代码（在大屏幕中每行显示四张图像，但在移动屏幕中，它只能一一显示）：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 mt-2">
      <figure class="memberBoxImage">
        <img class="memberImgFront" src="https://placekitten.com/200/200">
        <img class="memberImgBack" src="https://lorempixel.com/200/200">       
      </figure>
      <div class="memberBoxDescription">
        <h4>Little text</h4>
        <p>More little text</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 mt-2"></div>
    <div class="col-xs-12 col-sm-6 col-md-3 mt-2"></div>
    <div class="col-xs-12 col-sm-6 col-md-3 mt-2"></div>
  </div>
</div>

CSS：

.memberBoxImage {
  position: relative;
}

.memberBoxImage img {
    position: absolute;
    top: 0;
    left: 0;
}

.memberImgFront {
    z-index: 1;
}

.memberImgBack {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: hidden;
}

.memberBoxImage:hover .memberImgFront {
  visibility: hidden;
}

.memberBoxImage:hover .memberImgBack {
  visibility: visible;
}

.memberBoxDescription {
  margin-top: 210px;
    text-align: center;
}

总而言之，我想将图像放在小屏幕上居中。

Answer 1

图像本身未居中，因为它使用了：

.memberBoxImage img {
    position: absolute;
    top: 0;
    left: 0;
}

您可以使用以下方法在div中将其水平居中放置：

.memberBoxImage img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

如果要确保它不会变得比容器大，则可以放入width: 100%;。

Answer 2

我使用了另一种方法，并且基本上摆脱了绝对定位。这是一个最小的示例：

.memberBoxImage img.memberImgFront {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

.memberBoxImage:hover .memberImgFront {
  visibility: visible;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-3 mt-2 text-center md-text-left">
      <figure class="memberBoxImage position-relative d-inline-block">
        <img class="memberImgBack" src="https://lorempixel.com/200/200">
        <img class="memberImgFront" src="https://placekitten.com/200/200">
      </figure>
      <div class="memberBoxDescription text-center">
        <h4>Little text</h4>
        <p>More little text</p>
      </div>
    </div>
  </div>
</div>

在小屏幕中具有相对位置的中心图像

2 个答案: