Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [css] Centrowanie DIVa w pionie
kamiseq
post
Post #1





Grupa: Zarejestrowani
Postów: 139
Pomógł: 0
Dołączył: 12.07.2005
Skąd: krakow

Ostrzeżenie: (0%)
-----


centrowanie w poziomie jest proste text-align: center w body{} i margin: 0 auto;w glownym divie.

a jak zrobic zeby ten div wycentrowalo w pionie, gdy np dajemy pelny ekran.
margin: auto auto; nie dziala:|


i podobne pytanko jak wycentrowac zawartosc takiego diva w pionie, bo valign mi jkaos nie dzialal i chyba nie jest to zgdne ze sztuka.

dzieki za rady, bo nigdzie nic nie moge znalesc: (IMG:http://forum.php.pl/style_emoticons/default/guitar.gif) ]
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
TomASS
post
Post #2





Grupa: Zarejestrowani
Postów: 1 660
Pomógł: 13
Dołączył: 9.06.2004
Skąd: Wrocław i okolice

Ostrzeżenie: (0%)
-----


Autorowi chyba chodziło o wycentrowanie w pionie. A kod:
  1. </head>
  2. html, body {
  3. height:100%
  4. }
  5. .valign-wrapper {
  6. height:100%;
  7. width:100%;
  8. display:table;
  9. background: Maroon;
  10. }
  11. .valign {
  12. margin:0 auto;
  13. display:table-cell;
  14. vertical-align:middle;
  15. background: Yellow;
  16. }
  17. <div id="jeden" class="valign-wrapper">
  18. zewnatrz
  19. <div id="dwa" class="valign">
  20. srodek
  21. </div>
  22. </div>
  23. </body>
  24. </html>

Niestety tego nie robi :/ Może coś źle wpisuje?

Jedyny pomysł jaki mi przychodzi to wycentrwanie tego za pomocą JS:
  1. <script type="text/javascript">
  2. function $(id) {
  3. return document.getElementById(id);
  4. }
  5.  
  6. function InitLoading(){
  7. l = $("Loading");
  8. l.style.width="180";
  9. l.style.height="60";
  10. l.style.top = ((screen.height-parseInt(l.style.height))/2)-160;
  11. l.style.left = (screen.width-parseInt(l.style.width))/2;
  12. }
  13.  
  14.  
  15. <style type="text/css">
  16. #Loading{
  17. background: White;
  18. font-size: 34px;
  19. border: 1px solid #C1C8D0;
  20. position: absolute;
  21. }
  22.  
  23. <body onLoad="InitLoading()">
  24. <div id="Loading">Loading...</div>
  25. </body>
  26. </html>

Mam nadzieję, że da się zrobić to za pomocą styli, ponieważ moje rozwiązanie nie będzie działać przy wyłączonym JS :/
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 14.10.2025 - 14:24