Как расположить текст по вертикали рядом с изображением в формате html / css?

Question

Каков наилучший и самый простой способ вертикального центрирования текста рядом с изображением в html? Должен быть независимым от версии / типа браузера. Чистое решение HTML / CSS.

Answer 1

Это может помочь вам начать.

Я всегда прибегаю к этому решению . Не слишком хакерский и выполняет свою работу.

РЕДАКТИРОВАТЬ: Я должен отметить, что вы можете достичь желаемого эффекта с помощью следующего кода (простите встроенные стили; они должны быть на отдельном листе). Похоже, что выравнивание по умолчанию на изображении (базовая линия) приведет к выравниванию текста по базовой линии; установка его в середину заставляет вещи хорошо рендериться, по крайней мере в FireFox 3.

<div>
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" style="vertical-align: middle;" width="100px"/>
    <span style="vertical-align: middle;">Here is some text.</span>
</div>

Answer 2

Исключает ли "чистый HTML / CSS" использование таблиц? Потому что они легко сделают то, что вы хотите:

<table>
    <tr>
        <td valign="top"><img src="myImage.jpg" alt="" /></td>
        <td valign="middle">This is my text!</td>
    </tr>
</table>

Пламя меня все, что вам нравится, но это работает (и работает в старых, джанки браузеров).

Answer 3

Есть способы: Используйте атрибут тега изображения align = "absmiddle" или найдите изображение и текст в контейнере DIV или TD в таблице и используйте

style="vertical-align:middle"

Answer 4

Это весело. Если вы заранее знаете высоту контейнера текста, вы можете использовать высоту строки, равную этой высоте, и текст должен располагаться по центру по вертикали.

Answer 5

Есть несколько вариантов:

• Вы можете использовать высоту строки и убедиться, что она высотой в качестве содержащего элемента
• Использовать отображение: ячейка таблицы и выравнивание по вертикали: среднее

Мой предпочтительный вариант будет первым, если это короткий пробел, или последним в противном случае.

Answer 6

Я рекомендую использовать таблицы с <td valign="middle"> (как упоминалось inkedmn , это работает во всех браузерах), но если вы переносите ссылку, вот как это сделать (работает в старых уродливых браузерах тоже как в Opera 9):

<a href="/" style="display: block; vertical-align: middle;">
    <img src="/logo.png" style="vertical-align: middle;"/>
    <span style="vertical-align: middle;">Sample text</span>
</a>

Answer 7

Один основной способ, который приходит на ум, - это поместить элемент в таблицу и иметь две ячейки, одну с текстом, другую с изображением стиль = "VALIGN: центр" с тегами.