I needed to replace the header text in a jQuery Mobile application with an image.
I first tried wrapping the image in the <h1> tag, but that adds quite a large margin and cuts off some of my image.
The solution I used was to instead add a wrapper div that centers everything in it. My header ended up looking like this…
|
1 2 3 4 5 |
<div data-role="header" data-position="fixed" data-theme="f"> <div class="center-wrapper"> <img src="images/header.png" alt="Header" /> </div> </div> |
center-wrapper is a custom style defined like this…
|
1 2 3 4 5 6 |
.center-wrapper { text-align: center; } .center-wrapper * { margin: 0 auto; } |
There may be a better way to do this, but this works for now.
One Response to “Centering A Header Image In jQuery Mobile”
JennHaack
You can also just wrap the image in a span using the built in jQuery class “ui-title” and it will position the image correctly. However, I am finding this causes some issues if the header is fixed. Working through that now…