+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Wyśrodkowanie poziome i pionowe (/thread-wy%C5%9Brodkowanie-poziome-i-pionowe)
Wyśrodkowanie poziome i pionowe - camilost - 06-10-2012
Witam, potrzebuję mieć wyśrodkowany zależnie od szerokości i wysokości okna podany kod:
Kod:
<div style="text-align:center; width:95%; height:90%; margin:auto; display:block; vertical-align:middle;">Nie potrafię sobie z tym poradzić, możecie jakoś nakierować jak to wyśrodkować poziomo i pionowo?
Poziomo działa, lecz nie wiem czy ok zrobiłem jakoś ;p
CSS dot. html i body
Kod:
html{font-size:26px; font-family:Arial, Helvetica, sans-serif; color:#999}
body{background:#FFF; font-family:"lucida grande",tahoma,verdana,arial,sans-serif; margin:0}Czy znacie jakieś dobre rozwiązanie "płynne"? Najlepiej pod FF i IE oraz telefony.
RE: Wyśrodkowanie poziome i pionowe - mateo - 06-10-2012
Poziome: margin: auto dla elementu i ew. dla elementu nadrzędnego text-align: center. Co do pionowego to vertical-align + odpowiedni display.
RE: Wyśrodkowanie poziome i pionowe - Kartofelek - 06-10-2012
1) pozycjonowanie absolutne - prawie każdy lightbox z tego korzysta
Kod:
<body>
<div style="background:#efefef; width:400px; height:500px; margin:-200px -250px; position:absolute; top:50%; left:50%">
</div>
</body>2) http://www.brunildo.org/test/img_center.html - zastosowanie dodatkowego elementu dla wykorzystania vertical-align.
Vertical align NIE POZYCJONUJE w pionie. On pozycjonuje elementy WZGLEDEM SIEBIE. czyli jeżeli masz długi i krótki, to ten którki będzie pozycjonowany wzdlędem długiego. I to jest właśnie rozwiązanie twojego problemu. Tworzysz 1 element 100% height (ale żeby to zrobić musisz w necie poczytać o "CSS 100% layout") a drugi pozycjonujesz względem niego. W linku powyżej masz napisane jak to zrobić. Ogólnie:
Kod:
.container {text-align:center;}
.container > span {height:100%; width:0; display:inline-block;}
.container .element-wysrokowany {display:inline-block; vertical-align:middle;}
<div class="container">
<span></span>
<div class="element-wysrodkowany"></div>Swoją drogą aż prosi się o zastowanie :before, :after ;]
RE: Wyśrodkowanie poziome i pionowe - camilost - 07-10-2012
Dziękuję za odpowiedzi, popróbuje i wybiorę tą która mi najbardziej odpowiada
Serdecznie dziękuję