Question

I am working on a website with Jquery Mobile. My title is aligned center of the menu as in the image above:

My CSS for the green border is:

.ui-title 
{
    border: 2px solid lime;
}

And the HTML:

<div data-role="header" data-position="fixed" class="menu">
    <a href="#" data-icon="home" data-theme="a">Home</a>
    <h1>Title</h1>
</div>

What I want is the title to span full width (relative to the current width of the window), but still be centered, as the pink lines in following image:

Any idea how to achieve this without breaking the Jquery Mobile layout (such as device-width for different target devices)?

Solution:

margin-right: 1% !important;
margin-left: 1% !important;

It seems to work in my case (even though the title gets behind the button if the window is small enough).

Update:

No work-around with surrounding div or changing CSS styles, such as margins, solved the issue with header getting too wide on some devices. I guess that’s why the title is so small, to fit all devices properly. I had no time to test this for hours, so I eventually gave up and went back to the default layout, and just made sure the title was narrow enough.

Answer 1

Use this css and set your left and right percentage (change 10% to any other number)

.ui-title {
    margin: 0.6em 10% 0.8em !important;
}

in case you want different values on different sides use this css:

.ui-title {
    margin: 0.6em 10% 0.8em 5% !important;
}

Also if possible give every header an id because mentioned css will change every element using .ui-title class.

Here’s an example: http://jsfiddle.net/Gajotres/QP9qm/2/