2012-09-12 14 views
5

Zanim ktoś w dół zagłosuje za pytaniem o kolejny problem centrowania. Proszę przeczytać moją sytuację przed oceną!Centrowanie płynu DIV z maksymalną szerokością i absolutnym pozycjonowaniem

Jestem zaznajomiony z najbardziej powszechnymi technikami centrowania rzeczy, ale tutaj jest moja sytuacja. Posiadam DIV, który musi być wyśrodkowany w pionie i poziomie w obrębie rodzica, ale musi również być płynny i nie może przekraczać szerokości 890 pikseli.

Maksymalna szerokość zapewnia płynność, jakiej potrzebuję, ale ponieważ elementy pozycjonowane bezwzględnie potrzebują szerokości, a nie maksymalnej szerokości, moje pionowe/poziome przerwy centrujące. W tej chwili muszę poświęcić płynność nad centrowaniem (lub odwrotnie), ale obydwa.

Chciałbym zachować zawartość w moim środku DIV ze względu na cały czas, mój aktualny kod nie to zrobić, to ukrywa treść jako okno jest mniejsza http://jsfiddle.net/cCQ2w/

Czy ktoś może zaproponować rozwiązanie, które może dla mnie zadziałać?

Odpowiedz

2

Próbowałem rozwiązać twój problem. Zobacz tę stronę: http://jsfiddle.net/PGce2/. Więc jest wyśrodkowany w pionie i poziomie i jest "płynny" i nie przekracza szerokości 890px.

+0

Dzięki za to inne podejście, ale przekracza ono 890 pikseli, spróbuj dodać więcej tekstu akapitu i powiększyć okno przeglądarki. Jakieś inne pomysły? – egr103

+0

@ egr103, Właśnie zapomniałem usunąć "width: 100%;" od .break css. Poprawiłem go tutaj: [http://jsfiddle.net/afNyC/](http://jsfiddle.net/afNyC/). Testowałem go w Firefox, Chrome i IE 9 – khomyakoshka

+0

Brilliant! Dzięki! Zasadniczo mój pierwotny kod miał 100% szerokości div za głównym bitem zawartości, tak aby obraz bg mógł wypełnić całą szerokość okna przeglądarki. Czy zaproponowałbyś dodanie innego wrappera do .break, aby uzyskać ten efekt? – egr103

2

Możesz podać szerokość 100% z maksymalną szerokością ustawioną na 890px.

Pokazałem [tutaj] [1] próbkę elementu div z wyrównaniem w poziomie i w pionie.

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

Używanie szerokości: 100% pracował w połączeniu z przechowywaniem obliczonej szerokości, a następnie ustawiania szerokości na początkową w celu ominięcia obliczenia przepływu. –

Powiązane problemy