Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Centrowanie obrazka
Forum PHP.pl > Forum > Przedszkole
lukasamd
Witam,
ostatnio staram się w usuwać ze wszystkiego co mam niepotrzebne znaczniki, tak więc wg. założeń zrobienie:

  1. <center><img src="adres_obrazka" alt="tytul_obrazka"></center>


jest niepoprawne. Znalazłem sposób na centrowanie obrazka:

  1. <img src="adres_obrazka" alt="tytul_obrazka" style="display: block; margin-left: auto; margin-right: auto;">


Czy to jest jedyny sposób przy użyciu css? Nie wykorzystam text-align bo jest do tekstów a nie obrazków. Poza tym mam jeszcze jedno pytanie, lepiej zamykać img czy nie? Dla walidatora:

  1. <img src="adres_obrazka" alt="tytul_obrazka" style="display: block; margin-left: auto; margin-right: auto;" />


Kod jest ok choć daje 1 ostrzeżenie.
parzygnat
Postaram się odpowiedzieć rzetelnie i wyczerpująco na Twoje pytania. Jeżeli chodzi o użycie <center> do obrazka to nie jest to najwłaściwsze rozwiązanie, dlatego że w html'u możemy wyróżnić dwa podstawowe elementy do budowy strony. Są to elementy blokowe (block) i liniowe (in-line). <center> jest elementem in-line i nie powinnien opisywać elementów blokowych. I tu pojawia się odwieczny problem webmasterów, bo w niektórych przeglądarkach <center> Ci zadzała a w innych nie.
Jeżeli chodzi o zamykanie to najlepiej zamykać wszysto co się da. To jest niespójność języka html z którą przeglądarki sobie różnie radzą, ale lepiej zamykać jak tylko się da smile.gif
Shili
Mylisz się - tekst-align nie jest do tekstów, a do centrowania elementów liniowych. Img jest jak najbardziej elementem liniowym, więc spokojnie możesz zastosować taką składnię.
parzygnat
Shili a zgodzisz się z tym, że obrazek może też być elementem blokowym??
lukasamd
Cytat(Shili @ 1.06.2008, 15:49:20 ) *
Mylisz się - tekst-align nie jest do tekstów, a do centrowania elementów liniowych. Img jest jak najbardziej elementem liniowym, więc spokojnie możesz zastosować taką składnię.


Nie mylę się, sprawdź sam, na inne elementy niż tekst ta właściwość NIE DZIAŁA.
Shili
Sama tongue.gif Na obrazki tekst jak najbardziej działa, piewsze słyszę że nie. Oczywiście wtedy obrazek nie może mieć stylu display: block; Sprawdziłam na trzech wiodących przeglądarkach, na wszelki wypadek i o dziwo teoria jest poprawna winksmiley.jpg

Oczywiście, że obrazek może być elementem blokowym, a div może być liniowy - ale to już zależy od programisty. Consortium twierdzi, że elementy liniowe centruje się poprzez text-align, a blokowe poprzez marginesy. Obrazki domyślnie są elementami liniowymi i o takowych piszę winksmiley.jpg
parzygnat
No i tu zaczynają się problemy. Poczekajmy aż wyjdzie nowa wersja HTML'a i wtedy może nie będzie takich problemów smile.gif ale to w sumie może się nigdy nie zdarzyć biggrin.gif
mls
Cytat(parzygnat @ 1.06.2008, 15:54:31 ) *
Shili a zgodzisz się z tym, że obrazek może też być elementem blokowym??


Tak naprawdę każdy element liniowy może być elementem blokowym.
Nie stosuje się już przestarzałych znaczników <CENTER></CENTER>. Od tego są CSSy i właściwość text-align (która wbrew nazwie odwołuje się, tak samo jak znacznik CENTER, do wszystkich elementów liniowych, nie tylko tekstu.
lukasamd
Efekty zabawy:

  1. <img style="text-align: center;" src="./images/example.jpg" />


Brak wycentrowania
  1. <span style="text-align: center;"><img src="./images/example.jpg" />


Brak wycentrowania

  1. <DIV style="text-align: center;"><img src="./images/example.jpg" />


Obrazek wycentrowany

Z tego co czytałem gdzieniegdzie, centrowanie 2 pierwszymi sposobami nie działa na firefoxie a wlaśnie tej przeglądarki używam, na IE7.0 też nie działa u mnie.

Dobra, to albo będę dawał w divach albo to co na samym początku pisałem.
Shili
No oczywiście, że musisz to centrować w jakimś elemencie blokowym. text-align: center; mówi, że wszystkie potomne elementy liniowe będą wycentrowane, ale i tak jest to lepszy sposób centrowania niż sztuczne zamienianie elementów na blokowe tongue.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.