Question

我怎样才能垂直和放大在jQuery网页的主要内容中水平对齐文本？我想对齐＆＃34; REZA SAN STUDIOS＆＃34;位于页面中间，垂直对齐中间。

我尝试使用position：absolute和relative并将它们对齐到left，top 50％但不同的移动浏览器不会在中间显示它们。左侧更多，右侧更多。

这是我的代码：

HTML：

<!-- MAINPAGE -->
<div data-role="page" data-theme="d">
  <div data-role="header" id="headerpageone">
    <a href="#myPanel" class="ui-btn ui-btn-inline"><h1>☰</h1></a>
    <img src="http://placehold.it/30x30">
  </div>
  <div data-role="content" data-theme="d" id="contentone">
    <h1>REZA SAN STUDIOS</h1>
  </div>
  <div data-role="footer" id="footerpageone" data-position="fixed">
    <a href="#intro" class="ui-btn ui-btn-inline" data-transition="slideup" ><img src="http://placehold.it/30x30"></a>
  </div>
</div>

CSS

body {
  font-family:'CoreHumanistSans';
  font-weight:500;
  letter-spacing:0.05em;
  font-size:14px;   
}
#headerpageone {
  text-align:center;
  padding-top:10px;
}
#contentone {
  text-align: center;
  vertical-align: middle;
}
#footerpageone {
    text-align:center;
}
.copy {
  padding-top:20px;
}

的jsfiddle： http://jsfiddle.net/LRyz8/

Answer 1

试试这个

#contentone
{
    position: absolute;
     top: 50%;
     height: 50%;
     width: 100%;
     text-align: center;
     padding:0;
}

http://jsfiddle.net/LRyz8/2/

Answer 2

使用;

<div style="display:table-cell; text-align : center; vertical-align:middle"> ..... </div>

请查看@

http://jsfiddle.net/FFG8y/

在jQuery mobile中垂直对齐文本

2 个答案: