JQuery Mobile - alignment button in the middle of the screen

This question is about jQuery Mobile. I have a screen that just contains a title and a button. By default, this is displayed on top of the screen. I was wondering how to align it in the middle of the screen.

Greetings.

+4
source share
1 answer

I assume that you only want to vertically align the button and leave the title at the top of the page. The easiest way to focus something vertically is to fully position it and set it to 50%. This will place the top of the content in the middle of the screen.

If you need a vertical content center in the middle of the screen, you need to know the height of the centralized content and move the content by half this amount using the negative top margin. With the addition and borders added by jQuery Mobile, a button with a text size of 1 meter will have a height of about 2.4 meters, and you will need to go up by 1.2em.

Here is an example, I put my button in a div and completely aligned the div:

<!DOCTYPE html> <html><head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <script src="http://code.jquery.com/jquery-1.5.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> </head><body> <div data-role="page"> <div data-role="header">Header</div> <div data-role="content"> <div style="position: absolute; top: 50%; margin-top: -1.2em;"> <a href="index.html" data-role="button">Button</a> </div> </div> </div> </body></html> 

When trying this, the button width itself has moved from the full screen width to the smallest possible width. If you still want the button to stretch across the screen, add "width: 100%; margin-left: -1em;" to the containing div style attribute.

+9
source

Source: https://habr.com/ru/post/1344456/


All Articles