[英]CSS - center big div inside smaller one + hidden overflow
http://jsfiddle.net/vT65S/ http://jsfiddle.net/vT65S/
html: HTML:
<div class="container">
<div class="wide1">test</div>
</div>
<div class="container">
<div class="wide2">test</div>
</div>
<div class="container">
<div class="wide3">test</div>
</div>
css: CSS:
.container { width: 100%; text-align: center; margin: 20px 0; overflow: hidden; }
.container div { background: red; margin: 0 auto; }
.wide1 { width: 100px; }
.wide2 { width: 600px; }
.wide3 { width: 1100px; }
I would like to have all "test" in one vertical line (centered). 我希望所有“测试”都在一条垂直线上(居中)。 I need use it in situation where I don't know width of the inner divs.
我不知道内部div宽度的情况下需要使用它。
Centered to what? 以什么为中心? The outer container divs?
外部容器div? You'll have to override the width of the inner divs, with something like
max-width: 100%
. 您必须使用
max-width: 100%
类的max-width: 100%
覆盖内部div max-width: 100%
。
Example: http://jsfiddle.net/vT65S/1/ 示例: http : //jsfiddle.net/vT65S/1/
.container div { background: red; margin: 0 auto; max-width: 100% }
Got it! 得到它了! But with JavaScript ... http://jsfiddle.net/vT65S/10/
但是使用JavaScript ... http://jsfiddle.net/vT65S/10/
jQuery(function($){
$(".container > *").each(function(){
var m = ($(this).parent().innerWidth() - $(this).outerWidth())/2;
$(this).css("margin-left", m);
});
});
Maybe there is a solution with pure CSS (?) 也许有一个纯CSS解决方案(?)
Got the same problem - solved with CSS3 translateX 遇到了同样的问题-使用CSS3 translateX解决
.container div{
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.