在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

我有一个类似的问题，一个三盒网格，两端有按钮，中间框有文字。文字是最顶尖的。但我注意到JQM正确地垂直对齐网格块中间的按钮。我看了一下应用给他们的风格。这是内心的。所以这对我有用。

<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/）才能正确定位它们。