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:
.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.
Got it! But with 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 (?)