Как лучше всего отцентрировать изображение и текст по центру

Question

Я часто сталкиваюсь с этой проблемой - и, пытаясь ее решить, я всегда задаюсь вопросом, делаю ли я это неправильно.

В «div» я хочу расположить изображение слева - и некоторый соответствующий текст справа - я бы хотел, чтобы они выглядели вертикально по центру. Какой лучший способ сделать это?

В настоящее время мой xhtml выглядит так:

<div class="key">
 <img alt="required" src="/images/forms/asterisk.png?" /> required
</div>

Вот как это выглядит в настоящее время - http://screencast.com/t/NGMxMjRmMmYt (вы увидите, что изображение звездочки не выровнено по вертикали с «обязательным» текстом. Boooo.

Обычно я думаю о позиционировании изображения абсолютно, а затем о добавлении некоторого левого отступа для перемещения текста, а затем о корректировке верхнего и нижнего отступов, чтобы текст располагался по центру. В конце концов, этот подход кажется слишком большой работой.

Answer 1

Добавление этого к вашему стилю должно сделать это:

.key * {
   vertical-align: middle;
}

Вы в основном говорите "каждый элемент внутри ключевого элемента класса должен быть вертикально центрирован". Это разметка, которой я следую (обычно это класс .button) и работает в IE, Chrome, FF, Safari.

Answer 2

Существует несколько вариантов (см. Вертикальное центрирование с помощью CSS для полного изложения). Какой из них лучше, зависит от ряда факторов, главным из которых является то, знаете ли вы размеры вашего контента или нет.

Если вы просто хотите центрировать текст по отношению к изображению, установка текста line-height на высоту изображения / контейнера может быть самым простым подходом ...

Answer 3

Будет работать следующий CSS:

.key img {
    vertical-align: middle;
}

Надеюсь, это поможет! : -)

Answer 4

Если контейнер DIV и Image имеют фиксированную ширину и высоту, то вы можете использовать CSS, но если нет, то jQuery Center Plugin является безусловно лучшим решением.