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][vertical-align]).

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][fiddle]
===

Which should look like this: 

![demo][demo]

[vertical-align]:https://stackoverflow.com/q/4952943/1366033

[fiddle]: http://jsfiddle.net/KyleMit/Z58xL/2/
[demo]: http://i.imgur.com/U8gB8QV.png

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](http://jsfiddle.net/Z58xL/)
===

[Template online](http://testmaps.camavision.com/assessorsHome/template/iowa-Mobile.html) as well

Aligning image and text in jQuery Mobile header

This is actually an issue in all browsers <sup>(that I've tested)</sup>

**Here's a screenshot** - *I added a grey border so it's easier to tell that it's not lining up*.

[![screenshot][screenshot]][fiddle-demo]

## [Here's a demo that reproduces the issue][fiddle]

The issue occurs when the [**inline form**][inline form] is on a screen that is larger than `768px`.

Particularly, the thing that messes up the alignment is from this [line of forms.less][forms.less] (which was introduced with [this commit][float commit]):



    float: none;

Naively, setting this value back to `float: left` seems to fix the problem, but I'm not sure what other issues may arise.  



    @media (min-width: 768px) {
        .form-inline .radio input[type="radio"], 
        .form-inline .checkbox input[type="checkbox"] {
            float: left;
            margin-right: 5px;
        }
    }

### [Here's a working version of your code with these changes][original code]

Other than that, you'd just have to tweak the CSS

[fiddle]: http://jsfiddle.net/KyleMit/m3RHG/1/
[fiddle-demo]: http://jsfiddle.net/KyleMit/m3RHG/1/show/light/

[screenshot]: http://i.imgur.com/SmFVJAF.png

[inline form]: http://getbootstrap.com/css/#forms-inline
[forms.less]: https://github.com/twbs/bootstrap/blob/master/less/forms.less#L452
[float commit]: https://github.com/twbs/bootstrap/commit/a82ca0f9e1711b32f7c07e23ea1e23dd253cd21e#diff-57a5fbf005ecc202d1e7e08c11f73b93

[original code]: http://jsfiddle.net/gn9Up/2/

In both chrome and firefox:

- `form-inline` causes the label to be shifted downwards and the space between the checkbox and the label is narrower than when using `form-horizontal`.
- `form-horizontal` displays perfectly



### [Here's a demo in jsFiddle][fiddle]

### Here's some code:



    <form class="form-inline">
        <div class="checkbox">
            <label>
                <input type="checkbox"/> Test againn
            </label>
        </div>
    </form>

**Here's a screenshot:**

![screenshot][screenshot]




[screenshot]: http://i.imgur.com/JEJ1HYn.png
[fiddle]: http://jsfiddle.net/gn9Up/

Is there a way to make the checkboxes all aligned correctly in both browsers or am I missing something?