Элемент вертикального выравнивания в div

-1

Я довольно долго борюсь с этим. У меня есть 2 плавающих div, и я хотел бы выровнять текст с изображениями внутри этих div.Элемент вертикального выравнивания в div

Вот JSFiddle

<div data-role="content" class="content"> 
    <ul data-role="listview" data-inset="true"> 
     <li data-icon="nf-arrow-r"> 
      <div style="overflow:hidden;"> 
       <div style="float:left;"> 
        <img src='http://images.lecouffe.org/wp-content/uploads/Chronometre.png' width='22' height='22' />08h00 - 12h30 
        <br/> 
        <img src='http://images.lecouffe.org/wp-content/uploads/Chronometre.png' width='22' height='22' />13h00 - 18h00</div> 
       <div style="float:right;font-weight:normal;color:blue;">9h30 + 
        <img src='https://si0.twimg.com/profile_images/378800000050266964/cfbc5ac04a7ced31fcbb9dfcf1649d65.png' width='32' height='32' /> 
       </div> 
      </div> 
     </li> 
    </ul> 
</div>

источник

2013-09-06 TheEwook

Вы пытались установить свойство «vertical-align» на что-нибудь? – j08691

Вы пытались использовать свойство CSS с вертикальным выравниванием? Значение 'middle' должно работать для вас. – Demonslay335

Да, конечно, я попробовал это. но не успел до сих пор – TheEwook

Вы можете решить эту проблему путем

Обертывания содержимого текста внутри тега <span>.
И затем добавив vertical-align: bottom; к вашим <span> и <img> тегам.

HTML:

<img src='http://images.lecouffe.org/wp-content/uploads/Chronometre.png' width='22' height='22' /><span>08h00 - 12h30</span>

CSS:

img, span{ 
    vertical-align: bottom; 
}

Working Sample

Примечание: Рабочий образец имеет border просто для иллюстрации.

источник

2013-09-06 17:27:16 Harry

Добавить это все теги изображений.

style='vertical-align:middle;'

Demo

источник

2013-09-06 17:23:31 EdiSainer

Прошу прощения, но текст на самом деле не согласуется с изображениями. – TheEwook

Правильно выровнено, только изображение не в правильном размере. см. изображение гамбургера. – EdiSainer

Простым решением будет использование дисплеев table и table-cell. Я покрасил клетки, так что будет ясно.

jsFiddle Demo

мне пришлось изменить некоторые стили, но не DOM.

<div style="font-weight:normal;color:blue;background:red; 
      vertical-align: middle; display: table-cell; 
      height:100%; text-align:right;">

источник

2013-09-06 17:29:53 Itay

Элемент вертикального выравнивания в div

ответ

Смежные вопросы