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

<div>

  <span style="">Works.</span>
</div>

Проверено в FF3.

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

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

<div class="box">

    <span style="">Works.</span>
</div>

Вот несколько простых методов для вертикальный-выровнять:

В одну линию вертикальные-выравнивание:средний

Это очень просто: установить высоту строки текста элемента, равного контейнера

<div>

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

Несколько строк, выравнивание по вертикали:снизу

Абсолютное позиционирование внутренних дел относительно его контейнера

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

Несколько строк# вертикальн-выровняйте:середина

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

Если вы должны поддерживать древней версии IE <= 7

Для того, чтобы получить это, чтобы работать правильно через правление, вы'll должны взломать код CSS немного. К счастью, есть ошибка, т. е. то, что работает в нашу пользу. Определение верх:50% на контейнер и сверху:-50% на внутренний div, вы можете достичь того же результата. Мы можем объединить два, используя еще одна особенность, т. е. не'т поддержка: дополнительные селекторы CSS.

  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }


<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

Переменной емкости высотой вертикальный-выровняйте:середина

Это решение требует несколько более современным браузером, чем другие решения, как это делает использование преобразования: собственность translateY`. (http://caniuse.com/#feat=transforms2d)

Применения следующих 3 строк CSS к элементу будет вертикально центра в пределах его родителя, вне зависимости от высоты родительского элемента:

position: relative;
top: 50%;
transform: translateY(-50%);

Изменить ваш див в контейнер:

div {display:flex;}

<БР> Сейчас существует два способа центру выравнивание для всех содержание:

Способ 1:

div {align-items:center;}

[Демо][1]

Способ 2:

div * {margin-top:auto; margin-bottom:auto;}

[Демо][2]

Попробуйте разные значения ширины и высоты на IMG и различных значений размера шрифта на пролет и вы'увидите, что они всегда остаются в центре контейнера.

Вы должны применить вертикальный-выровняйте: середина для обоих элементов, чтобы он был ровно по центру.

в

<div>

  <span style="vertical-align:middle">Perfectly centered</span>
</div>

в

В принимаются ответы имеет ли центр значок около половины X-высота текстом рядом с ним (как определено в технические характеристики Усс). Что может быть достаточно хорош, но может выглядеть немного офф, если в тексте надстрочные или подстрочные элементы, выделяясь только вверху или внизу:

Слева, текст не выровнен, на право, как показано выше. Демо можно найти в этой статьи о выравнивание по вертикали.

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

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

Этот метод используется в принятый ответ работает только для одного выложенного текста ([демо][1]), но не многострочный текст ([демо][2]) - Как отметили там.

Если кому-то нужно вертикально многострочный центр текста на изображение, вот несколько способов (Методы 1 и 2, вдохновленных этот CSS-уловок, которые статьи) Способ #1: в CSS таблиц ([для мандолины][4]) (ИЕ8+ (caniuse))

Усс:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

Способ #2: псевдо-элемента на контейнере ([для мандолины][6]) (ИЕ8+)

Усс:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

Способ № 3: на основе ([скрипка][7]) (caniuse)

УСБ (выше скрипку содержит префиксы):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

Этот код работает в IE, а также ФФ:

<div>

  <span>It does work on all browsers</span>
</div>

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

В принципе, вы'придется спуститься на CSS3.

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

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

<div>

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

Для справки, согласования и"команды" не должны't работа на пролет, потому что это в строке тегу, не на уровне блока тег. Такие вещи, как выравнивание, поля, отступы, и т. д. выиграл't работа на линии, потому что точка встроенным не сорвать текста.

CSS и HTML-теги делит на две группы: встроенные и блочные. Поиск "и в CSS я блока и инлайн&; и многие статьи показывает...

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

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

Еще одна вещь вы можете сделать, это установить текст'линии-высота s `размер изображения<див>. Затем установить изображения ввертикальный-выровняйте: середина;`

Что'серьезно Самый простой способ.

Не'т видели решение с "маржой" в любой из этих ответов пока нет, поэтому вот мое решение этой проблемы.

[Это решение][1] работает только если вы знаете ширину изображения.

HTML-код

<div>

    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

УСБ

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

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

Я обычно использую 3 пиксела на место "сверху". Увеличивая и уменьшая это значение, изображение может быть изменена на требуемую высоту.

Записи этих свойств пролет

span{
    display:inline-block;
    vertical-align:middle;
}

Использовать дисплей:инлайн-блок;при использованиивертикальный-выровнять имущества.Эти проблемы свойства

Вы можете установить изображение в качестве встроенного элемента, используяэкран` собственность

в

<div>

  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

в

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

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

Многострочный решение:

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

<div style="display:table;width:30px;height:160px;">

    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>

Работает во всех обозревателях и IE9+

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

<div class="table">
    <div class="cell">
        ![...](...)
        <span>It works now</span>
    </div>
</div>

и CSS части:

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

Обратите внимание, что вам нужно стиль и отрегулировать размер изображения и контейнер, чтобы заставить его работать, как вы хотите. Наслаждаться.

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

Для выравнивания изображения и продолжительность, можно просто сделать вертикальный-выровняйте:середина`. в

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

<div>

  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

в

Не уверен, почему это не'т сделать это на навигации'с браузером, но я обычно использую в качестве фрагмента такой при попытке отобразить заголовок с изображением и по центру текст, надеюсь, что это помогает!

https://output.jsbin.com/jeqorahupo

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">


                    http://lipsum.org</header>