Centrer verticalement le contenu d'un DIV dans jQuery Mobile

Question

J'essaie d'aligner le contenu du bloc d'une grille jQuery verticalement au milieu de sorte qu'il soit aligné avec l'autre élément de la même ligne.

<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/

Je voulais montrer le texte « mon texte » au centre de la boîte de sorte que soit aligné avec la zone de sélection sur le côté droit. Un travail a été d'avoir une marge supérieure pour la div gauche, mais la fixation des pixels pourrait ne pas être une bonne idée si le navigateur est redimensionné.S'il vous plaît suggérer tout CSS que je devrais envisager.

Answer 1

A solution sale en utilisant jQuery pour adapter dynamiquement la position du conteneur de texte 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> 

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

Vous pouvez tester ici: http://jsfiddle.net/giofiddle/9HNjf/4/

Answer 2

J'ai eu un problème similaire, une grille à trois cases avec des boutons sur les extrémités et un texte au milieu boîte de dle. Le texte était en haut. Mais j'ai remarqué que JQM alignait correctement les boutons au milieu de leur bloc de grille. J'ai regardé le style qui leur est appliqué. C'était ui-btn-inner. Alors, voici ce qui a fonctionné pour moi.

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

Answer 3

Vous devrez peut-être les définir sur un niveau d'égalité élevé (voir http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/) pour pouvoir les positionner correctement.