在jQuery Mobile中垂直居中放置DIV的內容

Question

我想在中間垂直對齊jQuery網格的塊的內容，以便它與同一行中的其他元素對齊。

<div class="ui-grid-a" style="border:1px solid"> 
<div class="ui-block-a" style="vertical-align:middle" ><span>My Text</span></div> 
<div class="ui-block-b" > 
<div data-role="fieldcontain"> 
    <select name="select-choice-1" id="select-choice-1"> 
    <option value="standard">Standard: 7 day</option> 
    <option value="rush">Rush: 3 days</option> 
    <option value="express">Express: next day</option> 
    <option value="overnight">Overnight</option> 
    </select> 
    </div> 
</div> 
</div><!-- /grid-a --> 

http://jsfiddle.net/neilghosh/9HNjf/1/

我想在盒子的中心顯示文本「我的文字」，這樣與在右側選擇框對齊。一個解決方法是左邊div有一些頂部邊緣，但如果瀏覽器被重新設置大小，修復像素可能不是一個好主意。請提出任何我應該考慮的CSS。

Answer 1

一個使用jQuery動態地適應文本容器div的位置髒解決方案：

<div class="ui-grid-a" style="border:1px solid"> 
    <div class="ui-block-a" style="position:relative"> 
     <div id="tc" style="position:absolute">My Text</div> 
    </div> 
    <div class="ui-block-b"> 
     <div data-role="fieldcontain"> 
      <select name="select-choice-1" id="select-choice-1"> 
      <option value="standard">Standard: 7 day</option> 
      <option value="rush">Rush: 3 days</option> 
      <option value="express">Express: next day</option> 
      <option value="overnight">Overnight</option> 
      </select> 
     </div> 
    </div> 
</div> 

javascript代碼：

var rowHeight = $(".ui-block-b").height(); 
$(".ui-block-a").height(rowHeight); 
var tcHeight = $("#tc").height(); 
var top = rowHeight/2 - tcHeight/2; 
$("#tc").css('top',top); 

您可以測試在這裏： http://jsfiddle.net/giofiddle/9HNjf/4/

Answer 2

我有一個類似的問題，一個三端的網格，兩端有按鈕，中間是文字dle框。文本是頂部對齊。但我注意到JQM正確地垂直對齊網格塊中間的按鈕。我看着應用於他們的風格。它是ui-btn-inner。所以這裏是對我有用的。

<div class="ui-block-b" style="text-align: center;"> 
    <div class="ui-btn-inner">my text</div> 
</div> 

Answer 3

您可能需要將它們設置爲等於高（請參閱http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/）以便能夠正確定位它們。