Подравняване на картинка и текст в линк

grizli

Registered
Как се подравняват картинка и текст в линк? Искам текстът да е центриран със средата на картинката вертикално - тя е 22 px висока и да има 2px м/у тях.

<div id="_име">
<a href="#"><img src="images/име.jpg" />Текст</a>
</div>

Нито маргин, нито падинг действат върху текста или картинката.
#_име img {margin: 0px 0 0 0;}
#име a:link {margin: 0; text-decoration: none; padding: 0 0 0 3px;} - не влияят. И line-height не влияе.
 
ronaldinho_880 каза:
Не те разбрах много добре ама си мисля, че трябва да сложиш position: absolute; и ще стане ! :)
Не ми харесва ама никак идеята! Така е най-лесно. Но трябва да има и друг начин.
http://www.bg-mamma.com/index.php - Погледни: Facebook вход и иконката. Това опитвам.
 
Не ти работи, защото <a> и <img /> са инлайн елементи и при тях нещата са малко по-различни. Както и да е, решението е да зададеш на снимката float:left;

Ето така:

[css]#ime {
line-height: 22px;
height: 22px;
}
#ime a img {
float: left;
padding-left: 2px;
}[/css]

В сайта си имам урок Обграждане на текст около снимка, който също може да ти е от полза. :)

Успех!
 
bytheway каза:
Не ти работи, защото <a> и <img /> са инлайн елементи и при тях нещата са малко по-различни. Както и да е, решението е да зададеш на снимката float:left;

Ето така:

[css]#ime {
line-height: 22px;
height: 22px;
}
#ime a img {
float: left;
padding-left: 2px;
}[/css]

В сайта си имам урок Обграждане на текст около снимка, който също може да ти е от полза. :)

Успех!
Не става. Ето ми кода, който съм задал, ако имаш желание да експериментираш:
Код:
#fblogin {float: right; margin: 7px 12px 0 0px; height: 22px; line-height: 22px;} 
#fblogin img {margin: 0px 0 0 0;}
#fblogin a:link {margin: 0; text-decoration: none; padding: 0 0 0 0px;}
Дали е 0 или друга стойсност за падинга и марджина на линка - все тая (не влияе). Маргинът за img също не влияе. Не че този логин работи, но някой ден може и да заработи. За сега не ми е по силите да напиша кода за вход с facebook.

PS: Да добавя, че флоатването на целия див ми трябва!
 
Твоя код се различава доста от този, който съм постнал по-горе.
Пробвай така

[css]
#fblogin {float: right; margin: 7px 12px 0 0; height: 22px; line-height: 22px;}
#fblogin img {margin: 0; float: left; padding-left: 2px;}
#fblogin a:link {margin: 0; text-decoration: none; padding: 0;}
[/css]

А ако можеш да дадеш някакво демо, ще бъде най-добре.
 
bytheway каза:
Твоя код се различава доста от този, който съм постнал по-горе.
Пробвай така

[css]
#fblogin {float: right; margin: 7px 12px 0 0; height: 22px; line-height: 22px;}
#fblogin img {margin: 0; float: left; padding-left: 2px;}
#fblogin a:link {margin: 0; text-decoration: none; padding: 0;}
[/css]

А ако можеш да дадеш някакво демо, ще бъде най-добре.
Различава се, понеже това, което предлагаш, както казах не работи. Аз се оправих. Зададох verical-align на img-то и Текстът се качи, където трябва.
 

Горе