I'm running into an issue getting an image to align with text in the "header" section of jQuery Mobile. I was able to drop in CSS successfully allowing me to center the image. However, applying any kind of an "align" tag within the image source doesn't produce the result I'm looking for.

The area I'm referring has the words "Iowa Assessors" next to the state logo.

Is this possible?

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

Answer

November 12, 2013

KyleMit

When you apply vertical-align: middle to text, the css doesn't really do what you intuitively think it ought to do. That's because the text is aligned to the middle of all available space, but the only available space is the exact height of the text, and so it doesn't move (read more about vertically centering text).

What you have to do is assign more available space than the text needs so it can be positioned in the center of that. To do this, add a line-height to the text equal to the height from the img.

Wrap your text in a span so you can style it, and add the following CSS:

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

Your HTML should look like this:

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

Here's a demo:

jsFiddle

Which should look like this:

demo