текст заголовка по центру - PullRequest
Новая
       1

текст заголовка по центру

3 голосов
/ 26 ноября 2011

Я хочу увеличить размер заголовка мобильного приложения jquery.Когда я делаю это, мне нужно, чтобы заголовок был в центре.Я обнаружил, что могу добавить строку вроде: 

        line-height: 30px;

к css, но это далеко не так много хака.Я предполагаю, что должен быть лучший способ сделать это. 

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
        <style type="text/css"><!--
            .ui-header {
                height: 50px;                
            }
            -->
        </style>  
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>This Needs To Be Centred Vertically</h1>
            </div>

            <div data-role="content">
                <p>Page content goes here.</p>   
            </div>

            <div data-role="footer">
                <h4>Page Footer</h4>
            </div>
        </div>
    </body>
</html>

Ответы [ 3 ]

10 голосов
/ 26 ноября 2011

Самый простой способ вертикального центрирования текста элемента блока - сделать высоту строки такой же, как высота указанного элемента. Обратите внимание, что это будет работать, только если у вас есть одна строка текста. 

line-height: 30px;
height: 30px;

Для элемента inline или table-cell вы можете использовать vertical-align: middle для достижения того же эффекта.

Также обратите внимание, что форсирование display: table-cell для элемента не будет работать в IE6-7.

В вашем случае я бы предложил использовать технику line-height / height.

0 голосов
/ 24 июля 2012

Вы можете попробовать что-то вроде этого: 

<div data-role="header">
   <div class="ui-bar">
      <h1>This Needs To Be Centred Vertically</h1>
   </div>
</div>

Документ: http://jquerymobile.com/test/docs/toolbars/docs-headers.html

0 голосов
/ 26 ноября 2011

Вы можете попробовать с 

display: table-cell; 
vertical-align: middle;

в вашем CSS.

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

Нет похожих вопросов

...