Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Display block vs inline - błędne centrowanie lub rozmiar
Forum PHP.pl > Forum > Przedszkole
eiliat
Witam,

Mam głównego DIV-a na stronie, którego szerokość jest dynamiczna (to pierwsze z utrudnień). Chcę wyświetlać w nim bloki o stałych rozmiarach (500x500). W jednym wierszu będzie tyle boksów ile starczy miejsca, te które się nie zmieszczą wędrują niżej itd.

Rozsądne wydaje się zastosowanie bloków więc kodzę:
  1. .container {
  2. margin: 0 auto;
  3. display: block;
  4. float: left;
  5. padding: 5px;
  6. }
  7.  
  8. .box {
  9. color: #fff;
  10. padding: 10px;
  11. margin: 10px;
  12. width: 500px;
  13. height: 500px;
  14. font-size: 16px;
  15. float: left;
  16. }


Wyświetlają się boxy o zadanych rozmiarach jednak są wyrównane do lewej. Szukam rozwiązania w internecie - głównie oparte są o stałą szerokość co u mnie odpada lub zmiana na inline-block. No dobra, robię zmianę na inline-block. Boxy się centrują jednak rozwalają mi się ich rozmiary a raczej pozycjonowanie - zależnie od ilości treści jeden jest wyżej, drugi jest niżej itd.

Jak pogodzić obie metody aby bloki miały stałe rozmiary i były wycentrowane?
trueblue
Nie wiem czy dobrze Cię rozumiem, ale dodaj vertical-align:top dla elementów, którym nadajesz display:inline-block.
fate
text-align:center do kontenera
http://jsfiddle.net/QLAb5/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.