Выравнивание изображения и текста в jQuery Мобильный заголовок

Question

У меня возникла проблема с выравниванием изображения с текстом в разделе «заголовка» jQuery Mobile. Мне удалось успешно сместить CSS, позволяя мне центрировать образ. Однако применение любого типа тега «align» внутри источника изображения не приводит к результату, который я ищу.

В области, о которой я говорю, есть слова «Оценщики Айовы» рядом с государственным логотипом.

Возможно ли это?

HTML:

<div data-role="header" data-position="fixed" data-theme="a"> 
    <div class="center-wrapper"> 
     <img width="35" height="40" alt="Header" 
      src="http://i.imgur.com/UQ1QWhH.png" /> 
     IOWA ASSESSORS 
    </div> 
</div> 

jsFiddle

Template online а

Answer 1

При применении vertical-align: middle к тексту, то CSS на самом деле не делать то, что вы интуитивно считаете, что должен делать. Это связано с тем, что текст выровнен по середине всего доступного пространства, но единственным доступным пространством является точная высота текста, и поэтому он не перемещается (читайте больше о vertically centering text).

Что вам нужно сделать, так это назначить больше доступного пространства, чем текст, чтобы он мог быть расположен в центре этого. Для этого добавьте line-height в текст, равный height, из img.

---

Оберните текст в пролете, так что вы можете стиль его, и добавьте следующий CSS:

.center-wrapper span { 
    vertical-align: middle; 
    line-height: 30px; 
} 
.center-wrapper img { 
    vertical-align: middle; 
} 

Ваш HTML должен выглядеть следующим образом:

<div data-role="header" data-position="fixed" data-theme="a"> 
    <div class="center-wrapper"> 
     <img width="35" height="40" alt="Header" 
      src="http://i.imgur.com/UQ1QWhH.png" /> 
     <span>IOWA ASSESSORS</span> 
    </div> 
</div> 

---

Демо-версия:

jsFiddle

Который должен выглядеть следующим образом: