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