Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Wyśrodkowanie w pionie - problem
Forum PHP.pl > Forum > Przedszkole
iki
Witam
Mój problem polega na tym, iż nie działa wyśrodkowanie w pionie elementu, który chciałbym wyśrodkować, a wszystkie inne selektory da się wyśrodkować bez problemu.

  1. Kod strony:
  2. <div id="t_head">Logo
  3.  
  4.  
  5. </div>
  6.  
  7.  
  8. <div id="t_m1" class="menu">Przeglądaj </div>
  9.  
  10. <div id="t_m2" class="menu">Kontynuuj</div>
  11.  
  12. <div id="t_m3" class="menu">Rozwiązuj</div>
  13.  
  14. <div id="t_m4" class="menu">i</div>
  15.  
  16. A tutaj CSS:
  17.  
  18. html {
  19. display:table;
  20. }
  21. body {
  22. display:table-cell;}
  23.  
  24. html, body {
  25. background-image: url(background.jpg) ;
  26. background-size: 100%, 100%;
  27. height: 100%;
  28. width: 100%;
  29. }
  30.  
  31. #t_head {
  32. border: 1px;
  33. border-color: white;
  34. background-image: url(b_index.png);
  35. width: 800px;
  36.  
  37.  
  38. }
  39.  
  40. #t_m1 {
  41. width: 234px;
  42. float: left;
  43. background-image: url(b_index.png);
  44.  
  45. }
  46.  
  47. #t_m2 {
  48. width: 234px;
  49. float: left;
  50. background-image: url(b_index.png);
  51.  
  52. }
  53.  
  54. #t_m3 {
  55. width: 234px;
  56. float: left;
  57. background-image: url(b_index.png);
  58.  
  59. }
  60.  
  61. #t_m4 {
  62. width: 98px;
  63. float: left;
  64. background-image: url(b_index.png);
  65.  
  66.  
  67. .menu {
  68. color: white;
  69. height: 78px;
  70. display: table-cell; <----
  71. vertical-align: middle; <----
  72. text-align:center;
  73. font-size: 28px;
  74.  
  75.  
  76. }
  77.  


Jak widzicie na końcu kodu, mam wstawione dwie linijki CSS, które powinny ustawić tekst w pionie. Są one poprawnie sformułowane, ponieważ, kiedy przypiszę te wartości dla ,,t_head", wyśrodkowuje tekst, który na roboczo do niego wpiszę. Nie działa również, gdy przeniosę te wartości wyżej do ,,t_m1" i tak dalej. Selektory ,,t_head" oraz ,,t_m1" itd. mają tego samego rodzica. Czy ktoś wie czym jest to spowodowane?
trueblue
Wyrzuć float z tych komórek.
Brakuje zamknięcia za stylem dla #t_m4.
iki
Zamknięcie jest, tylko nie skopiowałem bo dokleiłem ostatnie wartości ręcznie. Tak czy tak, jest zamknięty. Tekst wyświetla się na biało. Dlaczego mam usunąć? Jest mi to potrzebne, aby okna wyświetlały się obok siebie jak w menu.

Edycja:
No rzeczywiście, jak usunę float, wyśrodkowanie działa. Kurcze i co mam teraz zrobić aby wyświetlały się obok siebie? biggrin.gif
trueblue
float nie jest potrzebne, aby elementy wyświetlały się obok siebie, bo nadałeś mi display:table-cell.
iki
Rzeczywiście, wszystko w porządku. Dziękuję serdecznie smile.gif
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.