时间戳

首页 > 解决方案 > 仅将宽度可变的内联块卡片集合中的第一张和最后一张卡片水平居中

javascript - 仅将宽度可变的内联块卡片集合中的第一张和最后一张卡片水平居中

问题描述

我只需要将这组卡片中的第一张和最后一张卡片水平居中。每张卡片的高度设置为 70%，因此宽度是响应式的……如果宽度是固定百分比，我可以简单地计算左边距应该是多少以使第一张卡片居中并计算右边距应该是多少将最后一张卡片居中，但宽度是响应式的并且不是固定的……有什么解决方法吗？

目前，我刚刚猜测并通过使用 margin-left 和 margin-right 来观察中心是什么，但显然它们在所有视口上都不正确。我需要他们完美。

也许这需要JS？虽然真的在寻找一个CSS解决方案。

澄清一下，我不希望将所有卡片水平居中。我只是在寻找水平居中的第一张和最后一张卡片。两者之间的牌只是相对于第一张牌开始的位置内联定位。解释起来有点棘手，所以这里（https://jsfiddle.net/g5avo673/）是一个 JSFiddle，它准确地展示了我的意思。在这里很容易完成，因为定义了宽度，所以我能够计算出使第一张和最后一张卡片居中所需的边距，我的代码的问题是没有定义宽度，只有高度，所以我'我无法计算宽度响应时需要的边距。

JSF中：

https://jsfiddle.net/yn93phse/

代码：

<div id="horizontalproductcontainer">
  <div id="scrolling-wrapper">
    <div class="productcardfirst">
      <img src="images/.JPG" alt="." class="productimage1" />
    </div>
    <div class="productcard">
      <img src="images/.JPG" alt="." class="productimage1" />
    </div>
    <div class="productcard">
      <img src="images/.JPG" alt="." class="productimage1" />
    </div>
    <div class="productcard">
      <img src="images/.JPG" alt="." class="productimage1" />
    </div>
    <div class="productcardlast">
      <img src="images/.jpeg" alt="." class="productimage1" />
    </div>
  </div>
</div>

    #horizontalproductcontainer {
      z-index: 0;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
    }

    #scrolling-wrapper {
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      text-align: center;
      margin: 0 auto;
      height: 100%;
      width: 100%;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: none;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .productcardfirst {
      display: inline-block;
      position: relative;
      height: 70%;
      top: 50%;
      transform: translateY(-50%);
      margin-left: 30%;
      padding-right: 3%;
    }

    .productcard {
      display: inline-block;
      position: relative;
      height: 70%;
      top: 50%;
      transform: translateY(-50%);
      padding-right: 3%;
    }

    .productcardlast {
      display: inline-block;
      position: relative;
      height: 70%;
      top: 50%;
      transform: translateY(-50%);
      margin-right: 30%;
    }

    .productcard img,
    .productcardfirst img,
    .productcardlast img {
      height: 100%;
    }

标签： javascripthtmlcss

解决方案

您可以通过将公共属性分组如下来简化您的 CSS，并删除 productFirst 和 productLast 类（如果您想添加额外的样式，您可以保留它们），然后使每个产品 100% 宽度。
鉴于上述情况，您需要做的就是将 30% 的左坐标应用于所有产品（适用于任意数量的元素）：

#horizontalproductcontainer {
  z-index: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

#scrolling-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  height: inherit;
  -webkit-overflow-scrolling: touch;
}

.productcard {
  display: inline-block;
  position: relative;
  top: 25%;
  left: 30%;
  height: 40%;
  width: 100%;
  /* padding: 3%; */
}


.productcard img {
  width: 40%;
}
<div id="horizontalproductcontainer">
      <div id="scrolling-wrapper">
        <div class="productcard">
          <img src="https://cdn.mos.cms.futurecdn.net/QjuZKXnkLQgsYsL98uhL9X-650-80.jpg" alt="." class="productimage1" />
        </div>
        <div class="productcard">
          <img src="https://cdn.mos.cms.futurecdn.net/QjuZKXnkLQgsYsL98uhL9X-650-80.jpg" alt="." class="productimage1" />
        </div>
        <div class="productcard">
          <img src="https://cdn.mos.cms.futurecdn.net/QjuZKXnkLQgsYsL98uhL9X-650-80.jpg" alt="." class="productimage1" />
        </div>
        <div class="productcard">
          <img src="https://cdn.mos.cms.futurecdn.net/QjuZKXnkLQgsYsL98uhL9X-650-80.jpg" alt="." class="productimage1" />
        </div>
      </div>
    </div>

推荐阅读