[HTML][CSS] Centrowanie obrazka Opcje

[-lukasamd-]

Witam,
ostatnio staram się w usuwać ze wszystkiego co mam niepotrzebne znaczniki, tak więc wg. założeń zrobienie:

[HTML] pobierz, plaintext 
<center><img src="adres_obrazka" alt="tytul_obrazka"></center>
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
<img src="adres_obrazka" alt="tytul_obrazka" style="display: block; margin-left: auto; margin-right: auto;">
[HTML] pobierz, plaintext 

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:

[HTML] pobierz, plaintext 
<img src="adres_obrazka" alt="tytul_obrazka" style="display: block; margin-left: auto; margin-right: auto;" />
[HTML] pobierz, plaintext 

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 (IMG:http://forum.php.pl/style_emoticons/default/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-]

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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/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ę (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) ale to w sumie może się nigdy nie zdarzyć (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

[mls]

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:

[HTML] pobierz, plaintext 
<img style="text-align: center;" src="./images/example.jpg" />
[HTML] pobierz, plaintext 

Brak wycentrowania

[HTML] pobierz, plaintext 
<span style="text-align: center;"><img src="./images/example.jpg" />
[HTML] pobierz, plaintext 

Brak wycentrowania

[HTML] pobierz, plaintext 
<DIV style="text-align: center;"><img src="./images/example.jpg" />
[HTML] pobierz, plaintext 

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.

Ten post edytował lukasamd 3.06.2008, 13:10:28

[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 (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)