如何水平中心 - 裁剪div在其他div [英] how to horizontally center-crop div inside other div
问题描述
尝试水平居中并裁剪(如果需要)另一个div中的div。
Trying to horizontally center and crop (if necessary) a div inside of another div.
可以使用背景图片实现相同的效果,但在此
It's possible to achieve this same effect with a background image, but in this case my content is not a single image.
小提琴: 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更宽,它会播种,但它的内容是左对齐,只在右边裁剪。
As long as the poster_container div is wider than the poster_row div, the content is centered. But once poster_row is wider, it crops but its content is flush left and cropped on the right only.
我试图有内部poster_row div中心和作物从两边。外部div将是视口的100%,因此它的宽度是任意的。理想情况下,我想内部div也有任意宽度,所以我可以轻松换出内容,而不改变CSS。
I'm trying to have the inner poster_row div center and crop equally from both sides. The outer div will be 100% of the viewport, so its width is arbitrary. Ideally I'd like the inner div to have arbitrary width as well, so I can easily swap out content without changing the CSS.
推荐答案
p>我想我得到了:
我让你添加你的前缀并删除最大宽度值
I let you add your prefixes and remove the max-width value
.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);
}
这篇关于如何水平中心 - 裁剪div在其他div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!