垂直中心標題文本

我期待增加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>

來源

2011-11-26 TofuBeer

垂直居中塊元素文本的最簡單方法是將行高設置爲與所述元素的高度相同。請注意，如果您只有一行文字，則此功能纔有效。

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

在內嵌或表單元格元素，你可以使用vertical-align: middle來達到同樣的效果。

另外請注意，強制display: table-cell上的一個元素將無法在IE6-7中工作。

就你而言，我會建議使用行高/高度技術。

來源

2011-11-26 18:42:43 Leo

感謝。您的線路/線路高度解決方案是我找到的最簡單的解決方案。它在jQuery Mobile中可以很好地將東西放在標題中。 – devdanke

確實也有2行內容的solutuion？ – AdrianoCelentano

這取決於您是否確切地擁有兩行文本或文本長度是否可變。我強烈推薦Chris Coyier撰寫關於垂直居中多行文本的博客文章：http://css-tricks.com/centering-in-the-unknown/ – Leo

您可以嘗試與

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

在你的CSS

。

來源

2011-11-26 18:42:23

你可以嘗試這樣的事：

<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

來源

2012-07-24 17:55:25 geralOE

垂直中心標題文本

回答

相關問題