CSS - centrul div div interior mai mic + overflow ascuns

http://jsfiddle.net/vT65S/

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; } 

Aș dori să aibă toate "test" într-o linie verticală (centrat). Trebuie să o folosesc în situația în care nu cunosc lățimea divsurilor interioare.

0

3 răspunsuri

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);
    });
});

Poate că există o soluție cu CSS pur (?)

0
adăugat

Centered to what? The outer container divs? You'll have to override the width of the inner divs, with something like max-width: 100%.

Example: http://jsfiddle.net/vT65S/1/

.container div { background: red; margin: 0 auto; max-width: 100% }
0
adăugat
dar aceasta schimba lățimea divului interior, ce se întâmplă dacă există altceva înăuntru? de exemplu. image - jsfiddle.net/vT65S/4 sau pur și simplu câteva paragrafe de text?
adăugat autor user1432269, sursa
Nu sunt clar despre ceea ce doriți să se întâmple - cu exemplul imaginilor, de ce doriți ca rezultatul final să arate? De asemenea, setați în mod explicit lățimea imaginilor din nou, nu uitați să le max-width : jsfiddle.net/vT65S/9
adăugat autor Christian Varga, sursa

Am aceeași problemă - rezolvată cu translateX CSS3

.container div{
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
0
adăugat
Cheers, cel mai bun răspuns aici. Funcționează și cu părintele relativ și cu copilul absolut
adăugat autor Jack Nicholson, sursa