在 jQuery Mobile 中垂直居中 DIV 的内容

Posted 2023-05-08

【中文标题】在 jQuery Mobile 中垂直居中 DIV 的内容

【英文标题】：Vertically centre the contents of a DIV in jQuery Mobile

【发布时间】：2012-04-05 16:55:43

【问题描述】：

我正在尝试在中间垂直对齐 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。

【问题讨论】：

你考虑过使用行高吗？虽然我建议总体上创建一个更优雅的解决方案，但 line-height:95px;会得到你想要的。

是的，试过了，但是当文本换到下一行时，会出现这样的问题jsfiddle.net/neilghosh/9HNjf/3

我会声明一个高度，使用溢出：隐藏；或者甚至是省略号。

【参考方案1】：

一个dirty使用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/

【参考方案2】：

我有一个类似的问题，一个三框网格，两端有按钮，中间有文本。文本顶部对齐。但我注意到 JQM 正确地垂直对齐了网格块中间的按钮。我查看了应用于它们的样式。它是 ui-btn-inner。所以这对我有用。

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

【参考方案3】：

您可能需要将它们设置为等高（请参阅http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/）才能正确定位它们。