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/

私はそれが右側に選択ボックスと整列するように、箱の中央にテキスト「私のテキストを」見せたかったです。 1つの回避策は、左のdivにいくつかの上マージンを持たせることでしたが、ピクセルを固定することは、ブラウザのサイズが変更されていれば良い考えではないかもしれません。動的テキストコンテナのdivの位置を合わせるためにはjQueryを使用して

Answer 1

汚いソリューション：あなたはここでテストすることができ

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); 

：

<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のコード http://jsfiddle.net/giofiddle/9HNjf/4/

Answer 2

を私は同様の問題、端にボタンと中央にテキスト3つのグリッドを持っていた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/参照）に設定する必要があります。