Центрирование изображения в привязном элементе

У меня есть элемент привязки, который выглядит как

<a href="url"><img src="imgurl"/>Text</a>

Я хотел бы, чтобы изображение и текст элемента привязки были вертикально выровнены. Я попытался добавить выравнивание по вертикали (css), padding, margin, ets, но изображение не будет вертикально выравниваться с текстом.

Ответ 1

Вертикальное выравнивание действительно применимо только к элементам брата. Это должно работать:

<a href="url"><img scr="imgurl"/><span>Text</span></a>

С CSS:

a img, a span { vertical-align: middle; }

Ответ 2

Как вы относитесь к "вертикальному выравниванию"? Должны ли они быть рядом друг с другом или сверху? В случае, если рядом друг с другом, должен ли текст быть выровнен с верхней, центральной или нижней частью изображения?

Если ваша проблема в том, что они отображаются друг над другом, а не рядом, добавьте следующее к вашему css:

a img { display: inline; }

Если ваша проблема противоположна, добавьте это:

a img { display: block; clear: both; }

и посмотрите, помогает ли это.

Ответ 3

Правильный способ выравнивания изображений и значков с привязными тегами

В вашем css

a {
   background: transparent url(/images/your_image) scroll no-repeat left center;
   padding: 2px 0px 2px 20px; //fit as you need
}

В вашем HTML

<a href="url">Text</a>