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

grizli
Нов
Нов
Reactions: 0
Posts: 63
Joined: Sun Jun 08, 2008 3:14 pm
Location: Русе
Contact:

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

Post by grizli »

Как се подравняват картинка и текст в линк? Искам текстът да е центриран със средата на картинката вертикално - тя е 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 не влияе.
Last edited by grizli on Fri Nov 30, 2012 10:01 pm, edited 1 time in total.
Jorko
Нов
Нов
Reactions: 0
Posts: 185
Joined: Thu Oct 04, 2012 10:50 pm
Answers: 15
Location: Mars
Contact:

Post by Jorko »

Пробва ли да зададеш изображението като бакграунд на дивът?
User avatar
ronaldinho_880
Нов
Нов
Reactions: 0
Posts: 108
Joined: Fri Oct 26, 2012 5:47 pm

уфф !

Post by ronaldinho_880 »

Не те разбрах много добре ама си мисля, че трябва да сложиш position: absolute; и ще стане ! :)
grizli
Нов
Нов
Reactions: 0
Posts: 63
Joined: Sun Jun 08, 2008 3:14 pm
Location: Русе
Contact:

Re: уфф !

Post by grizli »

ronaldinho_880 wrote:Не те разбрах много добре ама си мисля, че трябва да сложиш position: absolute; и ще стане ! :)
Не ми харесва ама никак идеята! Така е най-лесно. Но трябва да има и друг начин.
http://www.bg-mamma.com/index.php - Погледни: Facebook вход и иконката. Това опитвам.
User avatar
critrate
Потребител
Потребител
Reactions: 0
Posts: 640
Joined: Mon Jun 18, 2012 6:21 pm
Answers: 23

Post by critrate »

height:25; line-height:20; Това на 1 див.И в този див слагаш иконката + текста
grizli
Нов
Нов
Reactions: 0
Posts: 63
Joined: Sun Jun 08, 2008 3:14 pm
Location: Русе
Contact:

Post by grizli »

Jorko wrote:Пробва ли да зададеш изображението като бакграунд на дивът?
Виж по-долу какво гоня. :)
grizli
Нов
Нов
Reactions: 0
Posts: 63
Joined: Sun Jun 08, 2008 3:14 pm
Location: Русе
Contact:

Post by grizli »

critrate wrote:height:25; line-height:20; Това на 1 див.И в този див слагаш иконката + текста
Ти пробва ли го? Не работи.
User avatar
critrate
Потребител
Потребител
Reactions: 0
Posts: 640
Joined: Mon Jun 18, 2012 6:21 pm
Answers: 23

Post by critrate »

grizli wrote:
critrate wrote:height:25; line-height:20; Това на 1 див.И в този див слагаш иконката + текста
Ти пробва ли го? Не работи.
Ами не само съм го пробвал,но и аз използвам този начин :D
bytheway
Турист
Турист
Reactions: 0
Posts: 226
Joined: Fri Jul 08, 2011 6:11 pm
Answers: 28
Location: Aarhus, Denmark
Contact:

Post by bytheway »

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

Ето така:

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

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

Успех!
grizli
Нов
Нов
Reactions: 0
Posts: 63
Joined: Sun Jun 08, 2008 3:14 pm
Location: Русе
Contact:

Post by grizli »

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

Ето така:

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

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

Успех!
Не става. Ето ми кода, който съм задал, ако имаш желание да експериментираш:

Code: Select all

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

PS: Да добавя, че флоатването на целия див ми трябва!
Post Reply