WedX - журнал о программировании и компьютерных науках

Вертикально выровнять текст по центру

Хорошо, вот как выглядят эти HTML-элементы прямо сейчас:

введите здесь описание изображения

Я хотел бы, чтобы текст был центрирован с изображением. Размер изображения 32x32px.

Вот мой код:

<style>
div.interface {
    line-height: 32px;
    float: left;
    margin: 10px;
    width: 450px;
    font: 14px/27px 'CalibriRegular', Arial, sans-serif;
    color: #646464; text-shadow: 1px 1px 1px #fff;
    padding-right: 10px;
}
</style>

<div class="interface"><img src="assets/icons/interface.png" />Filled with fun animations and eye-candy!  Complete with Retina graphics.</div>
html css
10.02.2011

  • проверьте этот вопрос: stackoverflow.com/questions/4414034/ 10.02.2011
  • @JCOC: Похоже, это то, что мне было нужно. Извините, я не искал вокруг достаточно. Могу также продублировать ваш ответ здесь, чтобы я мог принять ответ. :) 10.02.2011
  • Нда, все в порядке! Я скопировал свой ответ и немного отредактировал, чтобы он больше соответствовал вашей ситуации! 10.02.2011

Ответы:


1

Чтобы центрировать текст по вертикали, установите высоту строки такой же, как и высота, например:

img{ height: 30px; }
#text{ line-height: 30px; }

И установите вертикальное выравнивание посередине:

#text{ line-height: 30px; vertical-align:middle; }
10.02.2011
  • Спасибо вам обоим. Я приму ответ JCOC, потому что он первым дал правильный ответ. Будет, как только будет доступно. Спасибо! 10.02.2011
  • это должно быть vertical-align: middle; 10.02.2011
  • Имейте в виду, что это работает, только если это всего одна строка текста. 14.11.2012

    • 2

    Добавьте style="vertical-align: middle" к тегу <img />.

    См. https://phrogz.net/CSS/vertical-align/index.html для полного объяснения тега vertical-align.

    10.02.2011
  • Это лучший ответ. 26.12.2013
    • Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]