Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Wyśrodkowanie diva nie znając width.
Forum PHP.pl > Forum > Przedszkole
miras
Witam, mam pytanko - jest możliwość wyśrodkowania diva nie znając jego szerokości ? np.

  1. #.win {
  2. width: 100%;
  3. }
  4.  
  5.  
  6. .win .menu {
  7. margin-left: auto;
  8. margin-right: auto;
  9. }
  10.  
  11. .win .menu .kafelki1 {
  12. float: left;
  13. }
  14.  
  15. .win .menu .kafelki1 a {
  16. display: block;
  17. width: 133px;
  18. height: 130px;
  19. padding-top: 10px;
  20. }


ten kod oczywiście nie działa, dałem tylko taki przykład - da się to jakoś zrobić?

Dzięki z góry!
webdice
Spróbuj z szerokością ustawioną na 100%.
Damonsson
To nie jest przykład, to jest bzdurny kod CSS nie mówiący o niczym.

Środkowanie bez znajomości szerokości można zrobić poprzez:
- ustawienie dla pożądanego elementu, marginesu lewego i prawego na auto,
- bądź ustawienie text-align: center dla jego rodzica.

Zależnie od tego jakie elementy chcesz środkować.
miras
Ustawienie szerokości na 100% nic nie daje a chce wysrodkowac div kafelki1..
webdice
Nie wyśrodkujesz elementu ktory ma float left.
miras
No i właśnie w tym tkwi problem, bo te divy kafelki1 muszą się układać obok siebie... da się to jakoś rozwiązać?
webdice
Stwórz div który je obejmie i go wyśrodkuj.
miras
mam tak:

  1. #.win {
  2. width: 100%;
  3. }
  4.  
  5.  
  6. .win .menu {
  7. margin-left: auto;
  8. margin-right: auto;
  9. }
  10.  
  11. .win .menu .kafelki1 {
  12. float: left;
  13. }
  14.  
  15. .win .menu .kafelki1 a {
  16. display: block;
  17. width: 133px;
  18. height: 130px;
  19. padding-top: 10px;
  20. }
  21.  
  22. .wysrodkowanie {
  23. margin-left: auto;
  24. margin-right: auto;
  25. }
  26.  
  27.  
  28.  




  1. <div class="win">
  2. <div class="menu"><div class="wysrodkowanie">
  3. <div class="kafelki1"><a href="index.php">odnosnik</a></div>
  4. <div class="kafelki1"><a href="index.php">odnosnik</a></div>
  5. <div class="kafelki1"><a href="index.php">odnosnik</a></div>
  6. <div class="kafelki1"><a href="index.php">odnosnik</a></div>
  7. <div class="kafelki1"><a href="index.php">odnosnik</a></div>
  8. <div class="kafelki1"><a href="index.php">odnosnik</a></div>
  9. </div></div>
  10. </div>



i nadal nic...
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.