Вертикальное центрирование содержимого DIV в jQuery Mobile - PullRequest
Новая
       4

Вертикальное центрирование содержимого DIV в jQuery Mobile

3 голосов
/ 21 марта 2012

Я пытаюсь выровнять содержимое блока сетки 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, который я должен рассмотреть.

Ответы [ 3 ]

0 голосов
/ 12 ноября 2012

У меня была похожая проблема: сетка из трех блоков с кнопками на концах и текстом в среднем поле.Текст был верхним выравниванием.Но я заметил, что JQM правильно выравнивал кнопки по центру их блока сетки.Я посмотрел на стиль, применяемый к ним.Это было ui-btn-inner.Так вот, что сработало для меня.

<div class="ui-block-b" style="text-align: center;">
    <div class="ui-btn-inner">my text</div>
</div>
0 голосов
/ 23 августа 2013

Возможно, вам потребуется установить их равными максимальным значениям (см. http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/), чтобы их можно было правильно расположить.

0 голосов
/ 21 марта 2012

A грязное решение с использованием 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/

...