Выровняйте текст и изображение внутри div

Question

Вот рендеринг HTML:

<div style="padding-left: 50px; vertical-align: middle;">
  <strong>NONE</strong>
  <img height="15" width="15" src="images/Checked.gif" alt="">
  <br>
  <span style="font-size: larger;">DEFAULT</span>
</div>  

общие css:

div {
  font-size:smaller;
  padding:5px 5px 0 0;
  float:left;
}

Вот как выглядит дизайн в firebug:

Я бы хотел, чтобы текст НЕТ выровнялся сверху, так же, как выровнено изображение (флажок). Любые идеи о том, как сделать это с CSS?

Answer 1

vertical-align: middle не делает то, что вы думаете, делает.

<div style="padding-left: 50px;">
  <strong style="float: left;">NONE</strong>
  <img height="15" width="15" src="images/Checked.gif" alt="">
  <br>
  <span style="font-size: larger;">DEFAULT</span>
</div>

Answer 2

Пара вещей:

• Поскольку вы знаете высоту своего изображения, чтобы получить точное выравнивание, которое вы хотите, попробуйте установить line-height.Вы можете установить его на 15px или 1 (только 1, без единицы) и посмотреть, какой вы предпочитаете.
• Измените значение для выравнивания по вертикали.Он предназначен для управления вертикальным выравниванием двух встроенных (или встроенных блоков) элементов рядом друг с другом.Что у вас есть, когда у вас strong рядом с img, просто middle выглядит не так, как вы хотите.Кросс-браузерными значениями, которые работают достаточно хорошо, являются baseline, top, bottom, а иногда text-top или text-bottom.
• Помимо этого, вы можете установить как img, так иstrong до block и используйте float, height и padding.

Примеры:

<div style="padding-left: 50px; line-height: 15px;">
  <strong>NONE</strong>
  <img height="15" width="15" src="images/Checked.gif" alt="">
  <br>
  <span style="font-size: larger;">DEFAULT</span>
</div>

<div style="padding-left: 50px; vertical-align: top;">
  <strong>NONE</strong>
  <img height="15" width="15" src="images/Checked.gif" alt="">
  <br>
  <span style="font-size: larger;">DEFAULT</span>
</div>

Другие уже приводят пример с числами с плавающей запятой.

Answer 3

Эти ответы у меня не сработали, вот как у меня получилось ...

<div style="line-height:0px;">
  <span style="vertical-align:middle;">test</span>
  <img src="myimage.png" style="vertical-align:middle;" />
</div>

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

Проверено в Chrome, FF, IE7 + ...

Answer 4

Проблема в том, что высота линии вверху будет соответствовать тому, насколько высока ваша картинка.Чтобы компенсировать это, вы можете поместить текст «none» в элемент блока, а затем установить там свое выравнивание.Вот пример:

<div style="padding-left: 50px; vertical-align: middle;">
  <div style="height:15px; width:50px; float:left;">NONE</div>
  <img style="height:15px; width:15px; float:left;" src="images/Checked.gif" alt="" />
  <br style="clear:both;" />
  <span style="font-size:larger;">DEFAULT</span>
</div>

Здесь вы можете поиграть с отступами и выравниванием внутри этого div вокруг текста без текста.