[CSS][HTML]Obrazek w jednej lini z h2 Opcje

[Tom:-)]

Jak powinien wyglądać HTML oraz CSS aby do h2 dodać na początku obrazek i żeby było wszystko w jednej linii (vertical-align:middle)

Całość będzie się mieścić w div:

[HTML] pobierz, plaintext 
    background-image:url(images/21.jpg);
    background-repeat:repeat-x;
    height:35px;
[HTML] pobierz, plaintext 

Ten post edytował Tom:-) 5.09.2011, 00:35:11

[sadistic_son]

[CSS] pobierz, plaintext 
h2,#obrazek{
display:inline;
}
[CSS] pobierz, plaintext 

Oczywiście obrazek musi mieć id="obrazek"

[Tom:-)]

Robiłem tak wcześniej i nie było trybiło. Przemęczenie górą a pytanie błache. To jeszcze jedno pytanie (proszę o wyrozumiałość). Czy da się w pionie wypośrodkować elementy bez używania padding-top?


Ten post edytował Tom:-) 5.09.2011, 02:27:37

[Ociu]

Ogólnie średnio z centralizacją w pionie. Można zrobić to tak:

[CSS] pobierz, plaintext 
.centralizacja 
{
position: absolute;
top: 50%;
}
[CSS] pobierz, plaintext 

Ale to tylko dla głównego diva.

[gargamel]

Żeby tekst h2 rozpoczynał się obrazkiem, najlepiej rozwiązać to w ten sposób:

[CSS] pobierz, plaintext 
h2 { background-image:url('sciezka/do/obrazka.jpg'); background-repeat:no-repeat; background-position: left center; }
[CSS] pobierz, plaintext 

Aby dodatkowo wyśrodkować go w pionie, należy dodatkowo dopisać do niego klasę:

[CSS] pobierz, plaintext 
.centred { line-height:10px; }
[CSS] pobierz, plaintext 

gdzie oczywiście nie wpisujesz przykładowych 10px, tylko wysokość otaczającego elementu.

Ten post edytował gargamel 5.09.2011, 13:12:05

[sadistic_son]

A może chodzi Ci o wyśrodkowanie absolutne - DEAD CENTER (IMG:style_emoticons/default/questionmark.gif)
Poeksperymentuj sobie zmieniając rozdzielczość, rozmiar okna przeglądarki itp. Czerwony prostokąt jest ZAWSZE na środku.

Ten post edytował sadistic_son 5.09.2011, 15:08:15

[Tom:-)]

Każdy post jest pomocny i za to dziękuję. Uważam że

Kod

h2 { background-image:url('sciezka/do/obrazka.jpg'); background-repeat:no-repeat; background-position: left center; }

wygląda najbardziej pro