Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I assume that you want to vertically align the button only, and leave the header at the top of the page. The easiest way to center something vertically is to position it absolutely and set it's top to 50%. That will put the top of the content in the middle of the screen. </p> <p>If you want the vertical center of the content in the middle of the screen, then you have to know the height of the content being centered and move the content up by half of that amount using a negative top margin. With the padding and borders added by jQuery Mobile, a button with 1em font-sized text will have about 2.4em height and need to move up by 1.2em.</p> <p>Here is an example, I've put my button in a div and absolutely aligned the div:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt;&lt;head&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.5.min.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"&gt;&lt;/script&gt; &lt;/head&gt;&lt;body&gt; &lt;div data-role="page"&gt; &lt;div data-role="header"&gt;Header&lt;/div&gt; &lt;div data-role="content"&gt; &lt;div style="position: absolute; top: 50%; margin-top: -1.2em;"&gt; &lt;a href="index.html" data-role="button"&gt;Button&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt;&lt;/html&gt; </code></pre> <p>When trying this myself, the width of the button went from the full width of the screen to it's smallest possible width. If you still want the button to stretch across the screen then add "width:100%; margin-left: -1em;" to the containing div's style attribute.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload