Question

我希望增加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>

Answer 1

垂直居中块元素文本的最简单方法是使行高与所述元素的高度相同。请注意，这只有在您有一行文字时才有效。

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

在内联或表格单元格元素上，您可以使用vertical-align: middle来达到相同的效果。

另请注意，在元素上强制display: table-cell在IE6-7中不起作用。

在你的情况下，我建议使用line-height / height技术。

Answer 2

您可以尝试使用

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

在你的CSS中

。

Answer 3

您可以尝试这样的事情：

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

Doc：http://jquerymobile.com/test/docs/toolbars/docs-headers.html

垂直中心标题文本

3 个答案: