如何在一个div中水平居中裁剪另一个div

Question

尝试在另一个div中水平居中和裁剪（如果需要）一个div。

可以使用背景图像实现相同的效果，但在这种情况下，我的内容不是单个图像。

Fiddle: http://jsfiddle.net/7aMhY/1/

HTML：

<div class="poster_container">
  <div class="poster_row">
    <div class="poster" style="width: 210px;">1</div>
    <div class="poster" style="width: 210px;">2</div>
    <div class="poster" style="width: 210px;">3</div>
    <div class="poster" style="width: 210px;">4</div>
    <div class="poster" style="width: 210px;">5</div>
  </div>
</div>

CSS（层叠样式表）：

.poster_container {
  text-align: center;
  border: dotted;
  border-color: red;
  background-color: #0ff;
  margin: auto;
  overflow:hidden;
}
.poster_row {
  text-align: center;
  margin: auto;
  display: inline-block;
  white-space:nowrap;
  oveterflow:hidden;
  border: dotted;
  border-color: blue;
  max-width: 100%;
}
.poster {
  border: dotted;
  display: inline-block;
  border-color: green;
  background-color: green;
  height: 315px;
  font-size:280px;
  color: white;
}

只要poster_container div比poster_row div宽，内容就会居中。但一旦poster_row变宽，它的内容就会向左对齐并仅在右侧裁剪。

我想让内部的poster_row div从两侧中心平均裁剪。外部div将占据视口的100％，因此宽度是任意的。理想情况下，我希望内部div的宽度也是任意的，这样我就可以轻松更换内容而不必改变CSS。

- pliny

---

我认为这不能仅通过纯CSS完成，但是使用JS，您可以在海报行上说margin-left -50％，然后加上海报行宽度的一半，这将使海报行水平居中。但是我无法立即想到任何仅使用CSS实现此目的的方法。 - Huangism

Answer 1

我理解的是：

我允许你添加前缀并移除最大宽度值

.poster_row {
    margin: auto;
    text-align: center;
    display: inline-block;
    white-space:nowrap;
    overflow:hidden;
    border: dotted;
    border-color: blue;
    position: absolute;
    left: 50%;
    transform:translate(-50%,0);
}

- Romaindr

---

这将炸掉.poster_container的高度，但是可以解决问题。示例在这里：http://jsfiddle.net/7aMhY/4/ - vee

这个能用。使用margin-left和width的另一种解决方案也可以正常工作，但需要注意一个细节，我也已经指出了。 - pliny

Answer 2

如果你的海报行宽度不会改变，请添加以下内容：

.poster_row {
    text-align: center;
    margin: auto;
    display: inline-block;
    white-space:nowrap;
    overflow:hidden;
    border: dotted;
    border-color: blue;
    position:absolute;
    left: 50%;
    margin-left: -525px;
    width: 1050px;
}

否则，您必须使用Js计算宽度和margin-left。

- Romaindr

---

正如 OP 所述：“理想情况下，我希望内部 div 也具有任意宽度，这样我就可以轻松地更换内容而不必更改 CSS。” - Huangism

是的，理想情况下宽度是任意的，但这个解决方案很好用。有一个注意点：我不得不在包含poster_container的div中设置overflow-x:hidden以防止水平滚动条。 - pliny