Як встановити вертикальний центр тексту поруч із зображенням у форматі html / css?

77

Який найкращий і найпростіший спосіб вертикального центрування тексту поруч із зображенням у форматі html? Повинна бути агностична версія / тип браузера. Чисте рішення HTML / CSS.

html css

— LordHits
джерело

128

Це може допомогти вам розпочати.

Я завжди повертаюся до цього рішення . Не надто хакі і отримує роботу.

EDIT: Я повинен зазначити, що ви можете досягти бажаного ефекту за допомогою наступного коду (пробачте вбудовані стилі; вони повинні бути на окремому аркуші). Здається, вирівнювання за замовчуванням на зображенні (базовій лінії) призведе до вирівнювання тексту до базової лінії; встановивши це на середину, ви отримуєте гарні результати, принаймні у 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>

Розгорніть фрагмент

— ajm
джерело

Це працює. Дякую. Хоча одне спостереження щодо атрибуту стилю, який ви маєте на своєму проміжку. Якщо я видалю це, це, здається, нічого візуально не змінює (у FF3.0.10 та IE7). Що ще потрібно?

— LordHits

4

Так. Вертикальне вирівнювання в CSS працює прямо протилежне тому, як ви думаєте: окремі Елементи повинні бути вертикально вирівняні в межах батьківського Елемента, замість того, щоб говорити батьківському Елементу, щоб він вирівнював по вертикалі всі свої дочірні елементи (як це робили б у клітинці таблиці).

— ajm

3

на жаль, це не працює, якщо текст загортається. лише 1-й рядок відцентрований, інші переповнюються нижче зображення (замість того, щоб усі були в центрі, загорнуті, праворуч від зображення). jsfiddle.net/vPpD4

— Spongman

26

Чи виключає "чистий HTML / CSS" використання таблиць? Тому що вони легко зроблять те, що ви хочете:

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

Запаліть мене всім, що вам подобається, але це працює (і працює у старих, незграбних браузерах).

— бреткеллі
джерело

Без турбот. Але я збираюся ігнорувати рішення на основі таблиць. ;)

— LordHits

3

Ти не боїшся вогнедишних css драконів.

— James P.

1

здивований, цього ще ніхто не сказав ... але ... таблиці для табличних даних

— Даїті

Це єдине, що працює в панелі навігації bootstrap правильно.

— Ведран

8

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

style="vertical-align:middle"

— зворотна коса риса17
джерело

Красиво просто! +5

— luchonacho

3

Це весело. Якщо ви заздалегідь знаєте висоту контейнера тексту, ви можете використовувати висоту рядка, рівну цій висоті, і вона повинна центрувати текст вертикально.

Встановлення line-heightмого spanрівного imgнаступному поруч це ідеально вишикувало.

— Нік Пікерінг

2

Є кілька варіантів:

Ви можете використовувати висоту рядка та переконатися, що вона є висотою як елемент, що містить
Використовуйте дисплей: комірка таблиці та вертикальне вирівнювання: посередині

Моїм улюбленим варіантом буде перший варіант, якщо це короткий простір, або останній інакше.

— Джон Макколлум
джерело

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>

— злийРейко
джерело

-2

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

— Брайан
джерело

"valign" не існує в css. Ви змішали html valign="center"зstyle="vertical-align:middle"

— etuardu