Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wyśrodkowanie w DIV
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Blajo
Problem następujący:

Potrzebuję w DIV o szerokości 980px umieścić nie wiem ile (takie założenie) elementów.
Element składa się z obrazka i podpisem pod nim.
Załóżmy, że elementy w środku mają rozmiary 160x160 px.
Elementy w głównym DIV muszą być wyśrodkowane.

HTMLowo wygląda to mniej więcej tak:

  1. <div style="float: left; width: 980px; text-align: center;">
  2. <div><img src=""><br />Podpis</div>
  3. <div><img src=""><br />Podpis</div>
  4. <div><img src=""><br />Podpis</div>
  5. <div><img src=""><br />Podpis</div>
  6. </div>


Any ideas ?
rocktech.pl
Witam.

  1. <div class="container">
  2.  
  3. <div><img src=""><br />Podpis</div>
  4.  
  5. <div><img src=""><br />Podpis</div>
  6.  
  7. <div><img src=""><br />Podpis</div>
  8.  
  9. <div><img src=""><br />Podpis</div>
  10.  
  11. </div>


  1. .container {
  2. float: left;
  3. width: 980px;
  4. }
  5. .container div {
  6. width:160px;
  7. margin:0 auto;
  8. text-align:center;
  9. }
Blajo
No właśnie nie. W tym momencie Divy są wyśrodkowane, ale jeden pod drugim, a nie obok siebie.

Inne pomysły?
rocktech.pl
Spróbuj tak. Ja nie to doprecyzuj jaki efekt chcesz osiągnąć.

  1. .container div {
  2. width:160px;
  3. float:left;
  4. text-align:center;
  5. }
  6. .container div img {
  7. margin:0 auto;
  8. }
mortus
  1. <div id="images">
  2. <div><img src="" alt="Obrazek 1" /><br />Podpis 1</div>
  3. <div><img src="" alt="Obrazek 2" /><br />Podpis 2</div>
  4. <div><img src="" alt="Obrazek 3" /><br />Podpis 3</div>
  5. <div><img src="" alt="Obrazek 4" /><br />Podpis 4</div>
  6. </div>

  1. #images {
  2. width: 980px;
  3. text-align: center;
  4. }
  5. #images div {
  6. display: inline-block;
  7. }

Zamiast <br /> powinieneś użyć czegoś innego np. <span> i odpowiednio to ostylować.
Nie wiem, czy to zadziała na wszyskich przeglądarkach, a testowałem na najnowszym Firefox-ie.
Blajo
Na testowanych przeze mnie działa - dokładnie o to mi chodziło.

Dzięki za pomoc :-)

Jak to z tym <span> ostylować, by mi się pod zdjęciem wyśrodkowany wyświetlał?
mortus
Cytat(Blajo @ 22.03.2012, 11:19:08 ) *
Na testowanych przeze mnie działa - dokładnie o to mi chodziło.

Dzięki za pomoc :-)

Jak to z tym <span> ostylować, by mi się pod zdjęciem wyśrodkowany wyświetlał?

  1. #images div span {
  2. display: block;
  3. }

I powinno być dobrze.
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.