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

grizli · Post by **grizli** » Fri Nov 30, 2012 9:44 pm

Как се подравняват картинка и текст в линк? Искам текстът да е центриран със средата на картинката вертикално - тя е 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 не влияе.

Jorko · Post by **Jorko** » Fri Nov 30, 2012 9:48 pm

Пробва ли да зададеш изображението като бакграунд на дивът?

ronaldinho_880 · Post by **ronaldinho_880** » Fri Nov 30, 2012 9:59 pm

Не те разбрах много добре ама си мисля, че трябва да сложиш position: absolute; и ще стане !

grizli · Post by **grizli** » Fri Nov 30, 2012 10:06 pm

ronaldinho_880 wrote:Не те разбрах много добре ама си мисля, че трябва да сложиш position: absolute; и ще стане !

Не ми харесва ама никак идеята! Така е най-лесно. Но трябва да има и друг начин.
http://www.bg-mamma.com/index.php - Погледни: Facebook вход и иконката. Това опитвам.

critrate · Post by **critrate** » Fri Nov 30, 2012 10:08 pm

height:25; line-height:20; Това на 1 див.И в този див слагаш иконката + текста

grizli · Post by **grizli** » Fri Nov 30, 2012 10:14 pm

Jorko wrote:Пробва ли да зададеш изображението като бакграунд на дивът?

Виж по-долу какво гоня.

grizli · Post by **grizli** » Fri Nov 30, 2012 10:18 pm

critrate wrote:height:25; line-height:20; Това на 1 див.И в този див слагаш иконката + текста

Ти пробва ли го? Не работи.

critrate · Post by **critrate** » Sat Dec 01, 2012 10:17 am

grizli wrote:
critrate wrote:height:25; line-height:20; Това на 1 див.И в този див слагаш иконката + текста
Ти пробва ли го? Не работи.

Ами не само съм го пробвал,но и аз използвам този начин

bytheway · Post by **bytheway** » Sat Dec 01, 2012 4:05 pm

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

Ето така:

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

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

Успех!

grizli · Post by **grizli** » Sat Dec 01, 2012 10:49 pm

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: Да добавя, че флоатването на целия див ми трябва!

web-tourist.net

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

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

уфф !

Re: уфф !