Centering A Header Image In jQuery Mobile

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…


center-wrapper is a custom style defined like this…

.center-wrapper {
  text-align: center;
.center-wrapper * {
  margin: 0 auto;

There may be a better way to do this, but this works for now.

2 thoughts on “Centering A Header Image In jQuery Mobile”

  1. 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…

  2. Actually I have Two image in header One I have to alighn left and another one at the center.

    Can u please suggest how can i do that and on left image i ahve to open a a panel

Comments are closed.