Perfection or Vanity

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

W zamierzchłych czasach HTML-a centrowanie było dość proste. Podobnie jak w edytorach tekstu klikało się jeden przycisk a wszystko automatycznie znajdowało się na środku - czy to tabela, obrazek czy tekst. W HTML służył do tego uniwersalny znacznik <center/>. Wszystko do symetrycznego wyświetlenia wstawiało się w niego, a przeglądarka myślała za nas - bo nam rozróżnienie co jest elementem blokowym a co liniowym nie było potrzebne.

Czasy się jednak zmieniły i nowoczesny „webmaster” operujący na CSS, a nie przestrzałych tagach prezentacyjnych musi znać różnicę między tymi dwoma typami bloków; podobnie jak wiedzieć w jaki sposób wyśrodkowywać tekst, grafiki oraz bloki layoutu <div/>.

Poziome centrowanie elementów liniowych

Na początek żelazna reguła - centrowanie poziome właściwością text-align: center działa tylko dla tekstu. Tekst (oraz obrazki, pola formularzy, etc) jest wyświetlany liniowo i da się go tym ujarzmić.

Poziome centrowanie elementów blokowych

Text-align nic nie da w zestawieniu z blokami layoutu - gdyż upraszczając, nie są tekstem. Każdy element blokowy bez ustawionej szerokości zajmuje 100% wolnego miejsca na stronie. Dlatego wycentrowanie go jest tylko możliwe, jeśli ograniczymy jego zapędy terytorialne - musimy ustawić mu szerokość. Może być to wartość w pikselach (768px na przykład dla najbardziej popularnego layoutu), procentach, także em'ach czy ex'ach. Dzięki temu powstanie przestrzeń, na początek z prawej strony, która umożliwi przesunięcie całego bloku na środek dostępnej przestrzeni.

Kluczem w tym umiejscowieniu jest odpowiednie ustawienie marginesów - auto - zajmujący całą dostępną przestrzeń. Gdy ustawimy lewy i prawy na auto, to margines „podzieli się” tą wolną przestrzenią z prawej strony i wycentruje blok.

  1. div#wrapper {
  2. width: 768px;
  3. margin-left: auto;
  4. margin-right: auto;
  5. }

Można także zastosować skrót właściwości margin:

  1. div#wrapper {
  2. width: 768px;
  3. margin: 0 auto;
  4. }

Przykład na żywo.

Tak się jednak składa, że znowu należy odbić w kierunku tego jak być powinno a jak czasami jest. Internet Explorer w wersji niższej niż 6.0 (na przykład częściej używany 5.5 bądź 5.0) nie do końca rozumie takiej konstrukcji. Należy pomóc mu dokładając centrowanie tekstu dla elementu nadrzędnego i usuwając wyśrodkowanie w samym elemencie (żeby nie popsuć wyglądu przez dziedziczenie).

  1. body {
  2. text-align: center;
  3. }
  4. div#wrapper {
  5. text-align: left;
  6. }

Wrzucamy to w komentarze warunkowe. Działa.

Poziome centrowanie obrazków

Wyśrodkowanie samotnego obrazka umieszczonego w akapicie jest możliwe dwojako. Pierwszy sposób opiera się na domyślnym wyświetlaniu liniowym każdego <img/> - wystarczy dodać klasę akapitowi, który jest pojemnikiem dla obrazka i ustawić text-align na center.

Drugi sposób działa także bez dodania klasy do akapitu, gdyż wykorzystuje kaskadę. Zamieniamy obrazek na element blokowy i centrujemy jak w przykładzie wyżej korzystając z automatycznych marginesów. Nie jest wymagane aby ustawiać mu szerokość (można to co najwyżej zrobić w dokumencie dla innego efektu) - dla blokowego <img/> wyśrodkowanie zadziała bez podanych wymiarów.

  1. p img {
  2. display: block;
  3. margin: 0 auto;
  4. }

Gdyby się okazało, że w akapicie musimy użyć jeszcze innych obrazków, i nie mogą być one wycentrowane (na przykład emotikonki na blogu / forum) to albo dodajemy im klasę (i wracamy do display: inline) albo centrowanemu obrazkowi, zawężając działanie CSS.

Pionowe centrowanie bloków

O ile umieszczanie elementów na środku w poziome jest dość proste jak widać po przykładach na górze, tak centrowanie w pionie może pokryć niejedną głowę siwizną. Kiedyś wystarczyło wrzucić cokolwiek do komórki tabelki i ustawić atrybut valign na middle.

W CSS istnieje właściwość vertical-align, lecz działa ona w sposób jaki byśmy chcieli tylko dla tabel. Należy więc postarać się, abyśmy na nich operowali. Weźmy przykładowo dwa bloki <div/>, a w nich jakąś zawartość:

  1. <div id="wrapper">
  2. <div id="cell">
  3. <p>In tristique convallis erat.</p>
  4. <p>Lorem ipsum dolor sit amet.</p>
  5. </div>
  6. </div>

Blok #wrapper zamienimy na tabelkę, a #cell w nim na komórkę tabeli. Zwyczajne tabele wstawiane za pomocą znaczników <table/>, <tr/>, <td/> wyświetlają się w określony sposób za pomocą przyporządkowanych im przez DOCTYPE właściwości display.

  1. #wrapper {
  2. display: table;
  3. }
  4. #wrapper #cell {
  5. display: table-cell;
  6. }

Potrzebujemy także określić wysokość tabeli, aby zawartość miała wymaganą przestrzeń.

  1. #wrapper {
  2. display: table;
  3. height: 350px;
  4. }

Na koniec zawartość komórki centrujemy w pionie:

  1. #wrapper #cell {
  2. display: table-cell;
  3. vertical-align: middle;
  4. }

Wszystko ładnie fajnie, ale znowu Explorer daje się we znaki. Nie wspiera display: table oraz table-cell. Dla niego należy użyć sztuczki z pozycjonowaniem. Potrzebny będzie dodatkowy pojemnik.

  1. <div id="wrapper">
  2. <div id="cell">
  3. <div id="hack">
  4. <p>In tristique convallis erat.</p>
  5. <p>Lorem ipsum dolor sit amet.</p>
  6. </div>
  7. </div>
  8. </div>

Pierwszym krokiem jest wypozycjonowanie #cell w środku #wrapper w połowie wysokości:

  1. #wrapper {
  2. position: relative;
  3. }
  4. #cell {
  5. position: absolute;
  6. top: 50%;
  7. }

Następnie dodatkowy boks pozycjonujemy relatywnie odejmując połowę jego wysokości:

  1. #hack {
  2. position: relative;
  3. top: -50%;
  4. }

Wszystko to w komentarz warunkowy i już. :)

Pionowe centrowanie tekstu

Jeśli mamy trochę tekstu, bądź mały obrazek, to w celu wyświetlenia go na środku możemy użyć właściwości line-height. Powiększy ona wysokość linijki tekstu, a wszystko co się w niej znajduje zostanie pokazane w połowie wysokości. Dobrym miejscem na użycie tej metody są zakładki w nawigacji na stronie - aby nie były za niskie, lecz nadal dobrze zaprojektowane.


A na koniec prezent w postaci gotowego layoutu dla wszystkich nowych przeglądarek wliczając IE6 - wyśrodkowanie bloku na całej stronie w poziomie i pionie, włącznie z pozbyciem się paru błędów w IE ze scrollbarami. Można dodać jeszcze jeden <div/>, aby uporać się z centrowaniem poziomym w IE5.x ale to już dla tych co potrzebują. Enjoy. ;)

Informacje i hiperłącza

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

Informacje o wpisie

Napisał riddle 19 kwietnia 2006 o 18:42

Kategorie: CSS, Standardy sieciowe

Dodaj do:

Wpisy archiwalne

Archiwum miesięczne

  1. dlugie.
    ale centrowanie tekstu w divie sie przyda.

  2. Dzięki za info o centrowaniu pionowym, może się kiedyś przydać. Przykład bardzo fajny.

  3. Jak zwykle łatwo, miło i przyjemnie. Tylko co z centrowaniem pionowym w body? :-)

  4. Lato_p: Ostatni link prowadzi do przykładu, o który Ci chodzi. A jak nie o ten to albo się nie da, albo nie wiem o czym mówisz. ;)

  5. To to, tylko jeszcze się nie nauczyłem: najpierw czytaj (przykłady), potem pisz :-)

  6. a co powiesz na pionowe wysrodkowanie tekstu obok obrazka?

    ps. znowu nie domknales jakiegos tagu i czcionka sie rozwala :]

  7. Pawlik: Już… myślisz, że łatwo jest się w takiej ilości tekstu nie pogubić? :D

    A tamto… wykorzystać technikę centrowania w pionie i dodać div z obrazkiem jako kolejną komórkę na lewo/prawo.

  8. zle zamknales center ;-P

  9. W xml'u tak można zamykać znaczniki - w tym wypadku to był pewnie skrót: po co pisac <center></center>

  10. Hura, pionowe centrowanie bloków opisane ;-)
    Kiedyś tego się naszukałem...

  11. Mi Pan Puck bardzo pomógł z centrowaniem strony w pionie i poziomie :) za pomocą ujemnych marginesów

  12. To znaczy chodziło o centrowanie w pionie :) przepraszam za pomyłkę.

  13. Bardzo ładny artykuł, wykonujesz świetną robotę, prowadząc tego joga.
    Ale w tym sposobie pionowego centrowania zawsze nie podobało mi się to, że - de facto - wracamy do wykorzystywania tabelek do tworzenia układu strony; z tym, że teraz nie w kodzie (x)html, tylko w kodzie css.
    Szukałem swego czasu innych sposobów, ale chyba znaleźć mi się nie udało. Masz może jakieś pomysły?

  14. A w czym przeszkadza tabelka w kodzie CSS? Strona przez roboty zostanie przeczytana tak samo, przez np. JAWS różnież będzie dostępna.

    Jeśli coś ma wyglądać jak tabelka, to dlaczego tak tego nie wyświetlać? Struktura zostanie zachowana, a o to głównie chodzi.

  15. Ja uciekam od tabelek z powodów czysto ideologicznych - tabelki są do czegoś, czy z racji swojej charakterystyki potrzebuje układu tabelarycznego.
    A tu nagle cały body staje się tabelką...

  16. A moze sposób z ujemnymi marginesami? Nie tworzy się tabelek a i tak ma się wycentrowaną "rzecz" w pionie...

  17. jARRodx: myślę, że to nie jest miejsce na dyskutowanie o tabelkach (w HTML i w CSS). Choć odnośnik podaję: http://kurs.browsehappy.pl/CSS/Table :-)

  18. lato_p: Dziękuję, nie znałem. :) Rozsądne, ale nie czuję się przekonany; może zbytni ze mnie purysta. :P

  19. Tabela to tabela, tak czy owak.

  20. Nie czytałem, ale nie podoba mi się zapis tagów (div jako <div/> itd). To nie są empty-tagi.

  21. vip: W tym przypadku (przykłady) jest to dopuszczalne.

  22. Czy wycentrowanie pionowe
    diva w IE zadziała, kiedy nie chcemy dawać konkretnej wysokosci wrapperowi (dałes 350px) ? .. Nie chce mi się teraz w tym grzebać ale mam wrażenie, że nie.. ale wtedy można sobie pomóc expression'em.
    Tak jak ktos napisał takie artykuły są bardzo potrzebne - lepiej tylko jakby przykłady jak najmniej operowały na sztywno ustalonych wartosciach to ogranicza ich uniwersalnosć.

  23. medyK napisał: "nie chcemy dawać konkretnej wysokosci wrapperowi"

    No to jaką ma mieć wysokość wrapper? Czyżby 100% ? Zobacz pierwszy komentarz Riddle`a i ostatni link do przykładu.

  24. ładne i pouczające ;D

  25. Wszystko ładnie, pięknie. Ale potrzebowałem dac na tło dodatkowe tło w postaci cienia (png) i zrobiłem to poprzez:
    #dark {
    width: 100%;
    height: 600px;
    background: url(http://www.muffina.eu/gora.png) left top repeat-x;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0;
    }

    Tylko, że nie mogę zorbić, aby właśnie ten div był POD następnym, a on jest nad... jakim parametrem to załatwić?

  26. @Dotcom a z-index nie dziala?;-)

  27. Dotcom: A co to ma do wpisu? Proszę się powstrzymać przed offtopikiem. A do nauki od podstaw to są fora i magazyny.

  28. Jak się ma struktura tabel do wrzucania komórek tabelki bezpośrednio do tabeli? Znacznik <tr> jest przecież wymagany, a "imitując" występowanie tabeli opuściłeś table-row.

  29. Może jeszcze raz podam link: http://kurs.browsehappy.pl/CSS/Table

  30. OK, dalszych informacji będę szukał w tamtym serwisie.

  31. Maynard 31 06 maja 2006, 03:58

    Czy jest zatem możliwe wyśrodkowanie diva w pionie wewnątrz wrappera o wysokości 100% ???

  32. Ta niespodzinka "wyśrodkowanie bloku na całej stronie w poziomie i pionie" jest ujowe :p Nie zastepuje tego co można było zrobić na tabelce.
    Przy zmianie rozmiarow okna zawartość nie jest wypozycjonowana tak jakbyśmy tego chcieli, żeby była ona zawsze na środku. A tabelki dawały rade z tym, i nie trzeba było walić tyle kodu. Szkoda, że nie działalo to w xhtmlu :(

  33. > Przy zmianie rozmiarow okna zawartość nie jest wypozycjonowana tak jakbyśmy tego chcieli

    Jak nie jest jak jest? Działa w FF, Operze i Konquerorze.

  34. Zawsze możesz użyć układu hybrydowego i skorzystać z pojedynczej pustej tabelki. Cały ten boom na układy beztabelkowe to powiedzenie [nie] zupie z tagów, gdzie lista wypunktowana to kolejna zagnieżdżona tabela. Tak naprawdę czytnikom ekranu nie przeszkadza fakt, że masz trzy kolumny jako trzy komórki. Jednak ja staram się używać tabel do danych tabelarycznych. Póki nie dostaniemy nowego mechanizmu layoutowania (position: "a", display: "abc") w CSS3, to stare techniki są czase wymagające.

  35. Moje nie dopatrzenie, działa prawidłowo. Tylko pod IE jest problem z scrollem, przy mzianie rozmiarów okna.

  36. Pobaw się overflow-x i overflow-y … ja ustawilem o-y na hidden, żeby nie było widać scrollbara w body.

  37. Wtedy w IE przy rozmiarach mniejszych niz zawartość nie bedzie można zobaczyć wszystkiego bez przewijania, a nie bedzie czym przewijać :P

  38. hmmm ciekawa rzecz - w Safari oba przykłady centrowania w pionie nie działają, dopiero ten "różowy" ;) To przecież ten sam kod, prawda? Więc czemu raz działa, a raz nie? %)

  39. Bardzo fajny tekst!
    Komentatorzy (vip itp.), przestańcie pisać notatki w stylu: "nie czytałem, ale...", "teskt za długi" itd. Popieram opinię, że np. na stronach firmowych powinno się dawać krótkie bloki tekstu, żeby nie odstraszyć klienta, ale to jest coś innego. Ja chętnie czytam wyczerpujące wypowiedzi. Jak bym chciał skrót, to czytałbym tylko RSS ;)

  40. Leon Kieres 40 22 czerwca 2006, 14:08

    Pytanie za 10 punktów:

    Mam diva 900x650px, na tym div'ie mam innego (position: relative; top: -650px; left: 50px;) i gdy w tym drugim divie wstawiam obrazek i zalewam go tekstem (float: left;) cały główny div się decentralizuje i idzie na samą górę... Po wywaleniu float: left w obrazku wszystko wraca do normy. Problem wystepuje jedynie pod FF.

    Pozdrawiam,

  41. Super... wreszcie jest to doskonale opisace, Riddle, jestes wielki :)

  42. zabawny cytat:
    "Na początek żelazna reguła - centrowanie poziome właściwością text-align: center działa tylko dla tekstu. Tekst (oraz obrazki, pola formularzy, etc) jest wyświetlany liniowo i da się go tym ujarzmić"
    Od kiedy obrazki i tekst to to samo?Ja bym dodał że działa jeśli jeśli elementem nadrzędnym nie jest element inline.A obrazki to wcale nie mają display:inline,bo przecież można im zmieniać rozmiar,nawet na 100%,to jest raczej inline-block nie obsługiwane przez przeglądarki.Autor nie dodał jedej rzeczy,ze jak ustawimy doctype na transitional w IE to wysokośc w pionie(a także centrowanie) się zrobi na automatyczną i nici z centrowania.Ponadto nic nie da ustawienie body wymiarów body na 100%,tylko musi być pojemnik div z takimi wymiarami.A ten sposób ze sztuczką display: table dla ie,z kombinacją position:relative/absolute jest podejrzany i z reguły się wysypuje,już lepiej zastąpić tabelą.I jeszcze jedno można by podpisać przycisk 'dodaj komentaż'(w IE) a nie żebym szukał po całej stronie

  43. Witaj, dzięki za obszerny komentarz wyjaśniający więcej niż napisałem w poście. Masz słuszność - zastosowałem uproszczenie w tekście, aby osoby początkujące zastosowały teorię w praktyce a nie wypytywały się o inline-block i replaced elements.

    Nie używam nigdzie trybu Transitional, właśnie z powodu IE6 - Strict jest przewidywalny po prostu. Sposób z display: table-cell i position jest udokumentowany w wielu miejscach Internetu i działa bardzo dobrze. :) Tabele zostawiam sobie do rzeczy bardzo skomplikowanych.

    Przycisk dodaj komentarz jest input typu image ze zdefiniowanym tekstem alternatywnym - włączyłem stronę w IE i wszystko zdaje się być takie same jak w Fx / Operze - czy możesz sprecyzować co z nim jest nie tak?

  44. Niestety centrownie pionowe w IE7 nie działa

  45. Komentarz warunkowy popraw do IE7

  46. Wiesz… ja tego nie potrzebuje, po prostu wszedłem z linku na forum. Lepiej po prostu popraw u siebie, żeby ludzie widzieli, że działa. Zobaczysz wtedy, że tekst wyskakuje z prawej poza diva.

  47. Super działa. Bardzo jasno i czytelnie wyjaśnione. Dzięki wielkie.

  48. Ja wiem, że to nic nie znaczący komentarz, ale… serdeczne dzięki, rozwiązałeś jeden z moich problemów!

  49. Niestety rozwiązanie nie działa jeśli chcemy wyświetlić obok siebie kilka takich wycentrowanych warstw. W Firefoxie działa słodko, ale pod MSIE (sprawdzałem pod 7.0) wszystkie kolejne warstwy nakładają się na siebie – i nie udało mi się tego ficzera w żaden sposób obejść do tej pory. A więc znowu pozostają tabelki… :-(

  50. Ale jak to? Ustawiasz jeden kontener, w niego wrzucasz te kilka kolumn i go centrujesz. W środku floatujesz kolumny, żeby były koło siebie.

  51. Ciekawy bug (Firefox 2):
    Weź gotowy kod, który dałeś na samym dole, wstaw tam <a href=”#”>Cokolwiek</a>, a potem dorzuć do styli

    a{ display: block; padding: 1px;
    }

    Enjoy!

  52. jeśli ktoś jeszcze czyta komentarze do tego artykułu:
    jak wycentrować blok który zawiera elementy pływające (float?)
    artykuły o centrowaniu zwykle skrzętnie pomijają ten aspekt sytuacji:)

  53. Jeśli ten element ma określoną szerokość i jest oczyszczony (dodanie clear:both do ostatniego niepływającego w nim elementu albo oveflow: hidden dla niego) to nie ma problemu – floaty układają się w środku.

  54. oxygenium79 54 15 kwietnia 2007, 12:30

    A ja mam taki problem: chciałbym ustawiać obrazki z podpisami koło siebie w rzędzie, a w momencie gdy skończy się miejsce w oknie przeglądarki (np. gdy użytkownik zmieni rozmiar okna), żeby kolejne pojawiały się w następnym wierszu. Całość ma być wycentrowana (to akurat nie problem chyba).

    Tak właśnie się dzieje, gdy się ustawia koło siebie same obrazki, z tym że ja chcę dodać jeszcze do obrazka podpis.

    Same obrazki:
    <img src=„obrazek1.jpg />
    <img src=„obrazek2.jpg />
    ...
    itd. – obrazki układają się jeden koło drugiego, aż do osiągnięcia brzegu okna – proste i logiczne

    a ja chcę dodać jeszcze podpis:
    <img src=„obrazek1.jpg /><br />podpis
    <img src=„obrazek1.jpg /><br />podpis

    oczywiście to nie wygląda tak jakbym chciał :-)
    teraz ustawiam to za pomocą tabel, ale przecież nie o to chodzi
    w jaki sposób mogę osiągnąć cel?

    Próbowałem coś takiego:
    <div>
    <img src=„obrazek1.jpg /><br />podpis
    </div>
    <div>
    <img src=„obrazek1.jpg /><br />podpis
    </div>

    i zmusić te DIVy, żeby sie układały jeden za drugim, zamiast jeden pod drugim, ale nic z tego nie wyszło – może więc w ogóle nie tędy droga?

  55. Bardzo przydatne, gdy zebrane w jednym miejscu. Nie piszę kodu często, gdy już to robię – nie mogę sobie przypomnieć tych sztuczek. Dodam do Del.icio.us .

  56. Michał 56 29 maja 2007, 23:41

    Mamy listę np z linkami, powiedzmy menu, wrzucamy to do bloku z przypisaną szerokością, czy da się takie coś wycentrować nie przypisując szerokości do elementów?

  57. czy ktos mi moze szczerze powiedziec jaki jest sens palowania sie z divami skoro z tabelami mozna to zrobic 10 razy prosciej?
    ale tak szczerze :)

    mam gdzies ze to jest trendy, skoro same z tym problemy, bo ff inaczej wyswietla niz ie, a juz boje sie pomyslec o safari….

    ja nie widze zadnych zalet, no moze to ze kod jest czystszy, ale user nie oglada kodu zrodlowego ;)

  58. pete78 jesteś kurde prowokatorem :) Ucz się divów, chłopie, bo W3C jeszcze dla takich dinozaurów (jak my) jeszcze zezwala na interpretację nieergonomicznych kodów, ale to się w końcu skończy :P
    Dzięki Riddle za twą naukę. (Teraz jestem nieco nowocześniejszy ;)

  59. Przy Content-Type ustawionym na application/xhtml+xml trzeba ustawić background-color dla html, a nie dla body.

  60. no i niestety mam problem nie działa :P znaczy nie działa w IE . Zresztą co sie będe rozpisywał zobaczie

    http://www.sport.bytnarowka29lo.szkola.pl/eldor/

  61. AlienLifeForm 61 03 września 2007, 14:44

    Witam
    Z uwagą prześledziłem przykład, sprawdziłem i po godzinie prób zrozumiałem, dlaczego u mnie metoda centrowania pionowego bloku nie działa. Ale nie rozumiem natury zjawiska ani nie znam sposobów walki z nim, stąd moje pytanie: jak to się dzieje, że ten sam styl przeniesiony do arkusza zewnętrznego powoduje rozsypanie się struktury?
    Rzecz leży chyba w definicji warunkowej, bo ściśle rzecz biorąc to właśnie jej umieszczenie w stylu warunkowym powoduje zgrzyt.
    Ta ‘wyjątkowość’ elementów blokowych zaczyna mnie zniechęcać i coraz częściej chodzi mi po głowie, że czas wrócić do sprawdzonych tabelek…

  62. Witam!
    Czytałem na szybko wszystkie komentarze ale nie znalazłem rozwiązania kiedy okno przeglądarki staje się mniejsze od wyświetlanej treści. Jak to rozwiązać?
    pozdr.

  63. Pomóżcie pliz …

    <head>
    <style type=„text/css”> #boxVer1 { position:relative; width:350px; border:0px solid #c5cacf; padding:0; } #boxVer1 p { font-size:12px; } #boxVer1 .newsy { border:1px solid #c5cacf; }
    </style>
    </head>
    <div id=„boxVer1”> <div class=„newsy”> <p style=„float:left; background-color:#eee; width:150px; „> Legere graece ea cum. Meliore noluisse ius no, per ea putant ornatus convenire. No tollit dissentiet duo. In nibh noster corrumpit pro, magna percipit persecuti eam ex. Nec te ferri mazim eleifend, his ullum appetere principes ad. Summo facilisi scriptorem id est. </p> <p style=„float:right; background-color:#ddd; width:150px;”> Legere graece ea cum. Meliore noluisse ius no, per ea putant ornatus convenire. No tollit dissentiet duo. In nibh noster corrumpit pro, magna percipit persecuti eam ex. Nec te ferri mazim eleifend, his ullum appetere principes ad. Summo facilisi scriptorem id est. </p> </div>
    </div>

    Jak zrobić żeby border opływał całość ...

  64. VirtuellMastah 64 27 grudnia 2007, 23:45

    Trochę to przekombinowane w przypadku pionowego pozycjonowania bloków, szczególnie „prezent” – nie chodzi pod IE7, wystarczy przecież głównemu blokowi, który ba być wyśrodkowany pionowo i poziomo zadać
    #example { width: 300px; height: 300px; margin-top: -150px; margin-left: -150px; position: absolute; top: 50%; left: 50%; }
    Po co te wszystkie udziwnienia??

  65. Po to, że gdybym chciał ustawiać wysokość tego bloku, to bym użył Twojego nieprzekombinowanego rozwiązania. Zauważ jednak, że wysokość jest określana przez ilość danych w środku. :]

    O IE7 się nawet jeszcze nie mówiło gdy pisałem ten post.

  66. Ja mam pytanie…
    Jeśli mam 3 divy z float: left; (obok siebie). Chciałbym żeby wszystkie razem były koło siebie, ale na środku strony… Niestety float left czy float right, kierują całość na lewą lub prawą stronę dokumentu ale nie na środek. Mogę oczywiście ustawić body margin-left na odpowiednią wartość dla każdej rozdzielczości ale to się chyba mija z celem…
    Będę niezwykle wdzięczny za każdą wskazówkę, z góry dziękuję.
    Pozdrawiam
    Andrzej

  67. Wrzuć te elementy do 1 diva i nadaj mu szerokość oraz wyśrodkuj przez margin: 0 auto;.

  68. (Komentarz zmodyfikowany 05.01.2008 o 21:25)

    Hmm, nie bardzo rozumiem, jeśli chodzi ci o przykładowo:

    <div style="margin: 0 auto;">
      <div style="float: left">aaa</div>
      <div style="float: left">aaa</div>
      <div style="float: left">aaa</div>
    </div>
    To nie działa, a jeśli chodzi ci o
    <div style="margin: 0 auto;">
      <p style="float: left">aaa</p>
      <p style="float: left">aaa</p>
      <p style="float: left">aaa</p>
    </div>

    To nie wiem czy działa, ale wolał bym tego uniknąć.
    Pozdrawiam

  69. Oczywiście że nie działał jeśli nie dostał szerokości do tego;)
    Dziękuję za pomoc:) Pozdrawiam.
    PS. Czy jest do tej strony jakiś baner lub link tekstowy który można umieścić na swojej stronce w celu wsparcia jej? Bo oprócz miłego przyjęcia jakie mnie tu spotkało to strona jest naprawdę ciekawa, więc myślę że taki link będzie dobrym wyrazem uznania :)

  70. Tak, już Ci chciałem pisać, że zapomniałeś o szerokości. BTW, następnym razem korzystaj ze znaczników Textile, żeby kod w komentarzu był czytelny.

    Banneru nie ma, link tekstowy chyba umiesz sobie zrobić. ;) Ewentualnie w sidebarze masz link do PayPala.

  71. Loonatic 71 14 lutego 2008, 22:37

    Czy ktoś wie, jak zmusić IE7, żeby poprawnie wyrenderowało ostatni przykład, który wygląda dobrze w IE6 i Fx?
    Wrzucenie kodu dla IE6 w komentarze dla IE7 wykrzacza layout… W przykładzie centrowania pionowego tekst wychodzi za swój blok…
    Pomoże ktoś :) ?

  72. dokładnie. Pod IE7 nie działa centrowanie w Pionie.

  73. No rewelka, człowiek tak bardzo wierzy w moc automatów, że już podstaw zapomniał ;) siwe włosy mi wypadły, a to takie proste ;)

  74. http://www.gimpuj.info/jezyki-internetu/centrowanie-diva-w-poziomie-w-pionie-t7401.0.html

    Sprawdzone. Działa w ie7, ff, opera.

  75. wszystko fajnie tylko nic nie dziala

  76. i huj ten twoj przyklad o centrowaniu pionowym jest denny bo i tak nie dziala

  77. nie działa w Firefoksie 3

  78. hauerpower 78 19 marca 2009, 15:24

    dla ie7 : bo inaczej jest przytulone do góry:

    box – to ten najzewnętrzny…

    #box { position: relative; }

    #wrapper{ position: absolute;top: 50%;}

    #cell { position: relative; top: -50%;left: -50%; }

  79. Dla obrażających autora wpisu:
    Czy nie widzicie daty dodania wpisu? Myślicie, że da się stworzyć uniwersalny wpis który będzie centrował tekst w każdej przeglądarce która wyszła na przestrzeni ostatnich 10 lat? Pójdzcie po rozum do głowy ******.