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…

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

2 Responses to “Centering A Header Image In jQuery Mobile”

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

    Reply
  2. shiva singhal

    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

    Reply

Leave a Reply