Как лучше всего отцентрировать изображение и текст по центру
Я часто сталкиваюсь с этой проблемой - и, пытаясь ее решить, я всегда задаюсь вопросом, делаю ли я это неправильно.
В "div" я хочу расположить изображение слева - и соответствующий текст справа - я бы хотел, чтобы они отображались по центру. Какой лучший способ сделать это?
В настоящее время мой xhtml выглядит так:
<div class="key">
<img alt="required" src="/images/forms/asterisk.png?" /> required
</div>
Вот как это выглядит в настоящее время - http://screencast.com/t/NGMxMjRmMmYt (вы увидите, что изображение звездочки не выровнено по вертикали с "обязательным" текстом. Boooo.
Я обычно думаю о позиционировании изображения абсолютно, а затем добавляю немного левого отступа, чтобы переместить текст, а затем корректирую верхний и нижний отступы, чтобы текст располагался вертикально по центру. В конце концов, этот подход кажется слишком большой работой.
4 ответа
Добавление этого к вашему стилю должно сделать это:
.key * {
vertical-align: middle;
}
Вы в основном говорите "каждый элемент внутри ключевого элемента класса должен быть вертикально центрирован". Это разметка, которой я следую (обычно это класс.button) и работает в IE, Chrome, FF, Safari.
Есть несколько вариантов (см. Вертикальное центрирование с помощью CSS для полного изложения). Какой из них лучше, зависит от ряда факторов, главным из которых является то, знаете ли вы размеры вашего контента или нет.
Если вы просто хотите центрировать текст по отношению к изображению, установите line-height к высоте изображения / контейнера может быть самый простой подход...
Будет работать следующий CSS:
.key img {
vertical-align: middle;
}
Надеюсь это поможет!:-)
Если контейнер DIV и Image имеют фиксированную ширину и высоту, тогда вы можете использовать CSS, но если нет, то плагин jQuery Center - безусловно, лучшее решение.