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

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

7 65
html css

7 ответов:

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

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

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>
104

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

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

Flame me все, что вам нравится, но это работает (и работает в старых, janky браузерах).

24

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

style="vertical-align:middle"
6

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

3

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

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

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

2

Я рекомендую использовать таблицы с <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>
0

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

-2