текста - центрировать изображение css

В принципе, вам придется перейти к CSS3.

-moz-box-align: center;
-webkit-box-align: center;

Во-первых, встроенный CSS не рекомендуется вообще, это действительно испортит ваш HTML.

Для выравнивания изображения и диапазона вы можете просто выполнить vertical-align:middle .

.align-middle {
  vertical-align: middle;
}

<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

Вы должны применять vertical-align: middle к обоим элементам, чтобы оно было идеально центрировано.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

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

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

Кто-нибудь говорил о том, почему vertical-align: top работает в сценарии? Изображение в вопросе, вероятно, выше текста и, таким образом, определяет верхний край строки строки. vertical-align: top на элемент span, а затем просто позиционирует его в верхней части строки строки.

Основное различие в поведении между vertical-align: middle и top - это то, что первое перемещает элементы относительно базовой линии окна (которое размещается там, где необходимо для выполнения всех вертикальных выравниваний и, следовательно, кажется довольно непредсказуемым ), а второе относительно внешних границ поле линии (что более ощутимо).

Вы можете установить изображение как inline element используя свойство display

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

Для записи «команды» выравнивания не должны работать в SPAN, потому что это тег в строке , а не тег уровня блока . Такие вещи, как выравнивание, маржа, отступы и т. Д., Не будут работать на встроенном теге, поскольку точка inline не нарушает поток текста.

CSS делит HTML-теги на две группы: в строке и блочном уровне. Поиск «css block vs inline» и отличная статья ...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(Понимание основных принципов CSS - это ключ к тому, что это не слишком раздражает)

Другое, что вы можете сделать, это установить line-height текста в размере изображений в <div> . Затем установите для изображений vertical-align: middle;

Это самый простой способ.

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

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Многолинейное решение:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

Работает во всех browers и ie9 +

Например, на кнопке в jQuery mobile вы можете немного ее настроить, применив этот стиль к изображению:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

Потому что вам нужно установить line-height на высоту div, чтобы это работало

Фактически, в этом случае это довольно просто: примените вертикальное выравнивание к изображению. Поскольку это все в одной строке, это действительно образ, который вы хотите выровнять, а не текст.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

Протестировано в FF3.

Теперь вы можете использовать flexbox для этого типа макета.

.box {
   display: flex;
   align-items:center;
}

<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>

Этот код работает как в IE, так и в FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

Я могу согласиться. Попробуйте использовать функции таблицы. Я использую этот простой трюк CSS для позиционирования модалов в центре веб-страницы. Он имеет большую поддержку браузера:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

и часть CSS:

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

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

background:url(../images/red_bullet.jpg) left 3px no-repeat;

Обычно я использую 3px вместо top . Увеличивая / уменьшая это значение, изображение можно изменить на требуемую высоту.