2012-09-12 14 views
5

Prima che qualcuno mi abbandoni mi fa chiedere un altro problema di centraggio. Per favore, leggi la mia situazione prima di giudicare!Centratura di un DIV fluido con larghezza massima e posizionamento assoluto

Ho familiarità con le tecniche più comuni per centrare le cose ma qui è la mia situazione. Ho un DIV che deve essere centrato sia verticalmente che orizzontalmente all'interno del suo genitore ma deve anche essere fluido e non superare la larghezza di 890px.

La larghezza massima raggiunge la fluidità che desidero, ma poiché gli elementi posizionati in modo assoluto necessitano di larghezza anziché di larghezza massima, le interruzioni di centraggio verticale/orizzontale. Al momento devo sacrificare la fluidità rispetto al centraggio (o viceversa) ma io I BISOGNO di entrambi.

mi piacerebbe mantenere il contenuto all'interno del mio DIV centrato in vista in ogni momento, il mio codice attuale non fare questo, si nasconde il contenuto come la finestra è fatto più piccolo http://jsfiddle.net/cCQ2w/

Chiunque può proporre un soluzione che potrebbe funzionare per me?

risposta

2

Ho provato a risolvere il tuo problema. Vedi questa pagina: http://jsfiddle.net/PGce2/. Quindi è centrato orizzontalmente e verticalmente ed è "fluido" e non supera la larghezza di 890px.

+0

Grazie a questo approccio diverso ma superiore a 890 px, provare ad aggiungere più testo di paragrafo e ingrandire la finestra del browser. Altre idee? – egr103

+0

@ egr103, ho appena dimenticato di rimuovere "width: 100%;" da .break css. L'ho corretto qui: [http://jsfiddle.net/afNyC/](http://jsfiddle.net/afNyC/). L'ho provato su Firefox, Chrome e IE 9 – khomyakoshka

+0

Brillante! Grazie! Fondamentalmente il mio codice originale aveva un div al 100% di larghezza dietro il bit principale del contenuto in modo che un'immagine bg potesse riempire l'intera larghezza della finestra del browser. Suggeriresti di aggiungere un altro wrapper attorno a .break per ottenere questo effetto? – egr103

2

È possibile fornire una larghezza del 100% con larghezza massima impostata su 890 px.

Ho mostrato [qui] [1] il campione di un div con il centro di allineamento sia orizzontale che verticale.

[1]: http://jsfiddle.net/r2qL5sgj/1/ 
+0

Utilizzo della larghezza: il 100% ha funzionato in combinazione con la memorizzazione della larghezza calcolata e successivamente impostando la larghezza iniziale per evitare il calcolo del flusso. –