Вертикально выровнять текст рядом с изображением?

Question

Почему не vertical-align: middle не работает? И все же, vertical-align: top работает .

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

Answer 1

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

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

Answer 2

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

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

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

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;
}

Answer 3

Запишите эти свойства span

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

Использование display:inline-block; Когда вы используете vertical-align свойство. Это связанные свойства

Answer 4

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

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

Answer 5

Вы можете установить изображение как 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>

Answer 6

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

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

Answer 7

Это может сбить с толку, я согласен. Попробуйте использовать функции таблицы. Я использую этот простой трюк 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; }

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

Answer 8

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

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 -->

Работает во всех браузерах и ie9 +

Answer 9

Во-первых встроенный 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>

Answer 10

Вы, вероятно, хотите это:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

Как предлагали другие, попробуйте vertical-align на изображении:

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS не раздражает. Вы просто не читаете документацию . ; Р