3

尝试水平居中并裁剪（如有必要）另一个 div 内的 div。

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

小提琴：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。

4

2 回答 2

2

我想我明白了：

我让您添加前缀并删除最大宽度值

.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);
}
于 2013-07-04T16:14:27.347 回答
1

如果您的 poster_row 的宽度不会改变，请添加：

.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 计算宽度和左边距

于 2013-07-04T15:46:50.060 回答