JQuery Mobile - кнопка выравнивания в середине экрана - PullRequest
4 голосов
/ 20 марта 2011

Этот вопрос касается JQuery Mobile.У меня есть экран, который просто содержит заголовок и кнопку.По умолчанию это отображается в верхней части экрана.Мне было интересно, как выровнять его по середине экрана.

Ура.

1 Ответ

9 голосов
/ 21 марта 2011

Я предполагаю, что вы хотите выровнять только кнопку по вертикали и оставить верхний колонтитул вверху страницы. Самый простой способ центрировать что-либо по вертикали - это расположить его абсолютно и установить его на 50%. Это поместит верхнюю часть содержимого в середину экрана.

Если вы хотите, чтобы вертикальный центр содержимого находился посередине экрана, вам нужно знать высоту центрируемого содержимого и перемещать содержимое на половину от этого значения, используя отрицательное верхнее поле. С отступами и границами, добавленными jQuery Mobile, кнопка с размером шрифта 1em будет иметь высоту около 2,4em и должна подниматься на 1,2em.

Вот пример, я поместил свою кнопку в div и абсолютно выровнял 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>

При попытке сделать это самостоятельно ширина кнопки изменилась от полной ширины экрана до ее наименьшей возможной ширины. Если вы все еще хотите, чтобы кнопка растягивалась по экрану, добавьте «width: 100%; margin-left: -1em;» к атрибуту стиля содержащего элемента div.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...