Question

I am having a header in a page and have placed a control group at the center. I wanted the control group to be aligned center for the orientations. How can we achieve this?

<div data-role="page" id= "Page1" style="background-color:#E8E8E8">
<div data-role ="header" data-theme="b"> 

  <a href="#" data-role="button" data-theme="b" class="ui-btn-left" id="backButtonHandler">Prev</a>
    <div data-role="controlgroup" data-type="horizontal" style="margin-left:24%;margin-top:5px;width:100%" >
    <a href="#" onclick="addContentToListView();" data-role="button" data-icon="arrow-l" >Prev</a>
    <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a>
    </div>
    <a href="#" data-role="button" data-theme="b" class="ui-btn-right" id="backButtonHandler">Next</a>
     </div>
   </div>

Answer 1

Docs Here:
– http://jquerymobile.com/demos/1.0a4.1/#docs/api/mediahelpers.html

Orientation Classes

The HTML element will always have a class of either “portrait” or “landscape”, depending on the orientation of the browser or device. You can utilize these in your CSS like this:

.portrait {
    /* portrait orientation changes go here! */
}
.landscape {
    /* landscape orientation changes go here! */
}