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

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

ОТВЕТЫ

Ответ 1

Это может привести к запуску.

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

EDIT: я должен указать, что вы можете добиться желаемого эффекта с помощью следующего кода (простить встроенные стили, они должны быть на отдельном листе). Кажется, что выравнивание по умолчанию на изображении (базовой линии) приведет к выравниванию текста к базовой линии; устанавливая, что к середине получает вещи, чтобы сделать красиво, по крайней мере, в FireFox 3.

<div>
    <img src="http://stackoverflow.com/content/img/so/logo.png" style="vertical-align: middle;"/>
    <span style="vertical-align: middle;">Here is some text.</span>
</div>

Ответ 2

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

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

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

Ответ 3

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

style="vertical-align:middle"

Ответ 4

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

Ответ 5

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

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

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

Ответ 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>

Ответ 7

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