Forum PHP.pl > [HTML][CSS] Centrowanie bloków w pionie i poziomie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] Centrowanie bloków w pionie i poziomie

phpoint

29.08.2008, 11:25:47

Witam,
Czy istnieje jakiś sposób wycentrowania bloków w pionie i w poziomie uniwersalnie dla FF, Opery, IE6 i IE7?

W googlach znalazłem 2 tutoriale ale niestety one nie działają...
http://www.google.pl/url?sa=t&source=w...h8Uz-rBjVu27g5Q

http://www.google.pl/url?sa=t&source=w...qDyfaVrwZw06Xyw

wookieb

29.08.2008, 11:29:21

W poziomie

Kod

body
{
text-align: center;
}

div
{
width: 300px;
margin: 0 auto;
}

html

Kod

Warunki działania kodu to
element pozycjonowany nie moze miec float: left, badz right. Musi mieć okresloną szerokość.

W pionie działa tylko na elementach typu inline (PRZECIEZ TO PISZE W TYCH LINKACH CO PODAŁES!) i to tylko w takich elementach ktore sa komorka tabeli (lub maja taki display ale to nei dziala na kazdej przegladarce)
jezeli chcesz wypozycjonowac diva musisz uzyc js. Można też php ale nie zawsze masz ku temu wszystkie parametry.

phpoint

29.08.2008, 11:39:45

Pod koniec 2 tutoriala masz link http://riddle.pl/-/xhtml/css-centering/vert-03.html
Odpal go pod ie7 jak widać centrowanie w pionie nie działa. Chodzi i o wycentrowanie w pionie i poziomie diva z komunikatem. Ok poszukam tutoriala jak to zorbic w JS, no chyba że masz jakiś pod ręką.

wookieb

29.08.2008, 11:42:55

Kod

function centruj(element)
{
element.style.position='absolute';

element.style.top=(element.parentNode.offsetHeight-element.offsetHeight)/2+'px';
}

phpoint

29.08.2008, 11:44:58

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
 <title>Middle</title> 
 <style type="text/css"> 
 html, body { 
   padding:0; 
   margin:0; 
   height:100%; 
   width:100%; 
 } 
 html { 
   display:table; 
 } 
 body { 
   display:table-cell; 
   vertical-align:middle; 
   text-align:center; 
 } 
 #middle { 
   width:400px; 
   margin:0 auto; 
   border:1px solid black; 
 } 
 * html #middle { 
   position:absolute; 
   top:expression((x=(document.documentElement.offsetHeight-this.offsetHeight)/2)<0?0:x+'px'); 
   left:50%; 
   margin-left:-200px; /* połowa szerokosci warstwy */ 
 } 
 </style> 
 </head> 
 <body xml:lang="pl"> 
   <div id="middle">jakis napis</div> 
 </body> 
 </html>
[HTML] pobierz, plaintext

znalazlem cos takiego, ale w IE7 tez sie wysypuje

wookieb

29.08.2008, 11:47:52

Kod z podanego linku działa jeżeli zamienisz

Kod

<!--[if lte IE 6]>

Kod

<!--[if lte IE 7]>

vokiel

29.08.2008, 12:59:30

Te centrowanie działa we wszystkich przeglądarkach, w jakich sprawdzałem: css_template_11

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.