Тема: Вирівнювання тексту відносно зображення

Привіт!
Я намагаюсь вирівняти текст відносно зображення якомога простішим способом.
Але як не намагаюсь нічого путнього в мене не виходить.
Ось те що я маю зараз:
http://i.imgur.com/7dXxjOX.png
Те чого я прагну досягти:
http://i.imgur.com/FU7cRka.png
Намагався використовувати властивість align із параметрами top, left
Не допомагає.
Я думаю приблизно так. Зробити із зображення один блок, із тексту інший і їх між собою уже вирівнювати за допомогою padding і margin. Але може є інший спосіб?

Білий Лунь

2

Re: Вирівнювання тексту відносно зображення

http://www.w3schools.com/cssref/pr_dim_line-height.asp
спробуйте line-height ;)

Подякували: Ярослав1

3

Re: Вирівнювання тексту відносно зображення

Краще для елементу поставити як background цю картинку та додати padding.

Подякували: Ярослав1

4 Востаннє редагувалося Ярослав (17.03.2014 15:19:01)

Re: Вирівнювання тексту відносно зображення

Ні. не варіант.

Краще для елементу поставити як background цю картинку та додати padding.

Так і зроблю, дякую!

Білий Лунь

5 Востаннє редагувалося Ярослав (17.03.2014 15:53:16)

Re: Вирівнювання тексту відносно зображення

Застосував. Вийшли отакі от граблі ((с) Bartash)

<div style="
    height: 19px; 
    background-repeat: no-repeat; 
    background-image: url(<?php echo \Uc::app()->url->create('/') ?>/files/images/friends_icon.png); 
    padding-left: 20px;
">Друзі</div>

В результаті довелось до кожного зображення додати іще вгорі по 2-3 смужки пікселів білого кольору, інакше ніяк не виходило.

Білий Лунь

6

Re: Вирівнювання тексту відносно зображення

Є така штука як background-position :)

Подякували: Ярослав1

7

Re: Вирівнювання тексту відносно зображення

Replace, на майбутнє :)

Білий Лунь

8

Re: Вирівнювання тексту відносно зображення

Взагалі краще так писати:

background: url(/files/images/friends_icon.png) 10px 0 no-repeat;

Коротше і все зрозуміло :)

Подякували: Ярослав1