Comment centrer un élément verticalement dans un div?

Je m'entraîne à créer un formulaire et je voudrais positionner les éléments de formulaire sur la gauche au centre de leur rangée comme cela se ferait automatiquement avec une table. Voici quelques jsFiddle pour ce que j'ai essayé jusqu'ici.Comment centrer un élément verticalement dans un div?

Comment centrer verticalement l'élément d'étiquette pour un formulaire?

Source

2011-11-03 deztructicus

Essayez-vous de centrer vos étiquettes verticalement? –

@Steve Adams oui. Par exemple. Le "feedback" pourrait être centré verticalement à côté de la boîte de sélection – deztructicus

Donnez label même hauteur que input filed ont & donnent line-height à votre label. Comme ceci:

.element label { 
    float: left; 
    font-weight: 700; 
    height: 30px; 
    line-height: 30px; 
    width: 156px; 
}

Source

2011-11-03 06:46:42 sandeep

Cela fonctionne. Cependant, est-ce que ce sont les directives CSS suivantes? Il se sent un peu hacky ... – deztructicus

n'est pas un hacky. Nous utilisons cette technique quand nous voulons un texte vertical milieu. – sandeep

Pas hacky, cela fonctionne parfaitement dans tous les navigateurs. Centrer le texte verticalement en utilisant la hauteur de ligne est le chemin à parcourir. – scumah

Vous pouvez utiliser jQuery et configurer la position après le chargement des éléments. Des ajustements mineurs à HTML (assigner les ID):

  <div class="element"> 
       <label id="feedback">Feedback: </label> 

       <select multiple="multiple" name="feedback" size="4" id="selectbox"> 
        <option value="">Option1</option> 
        <option value="">Option1</option> 
        <option value="">Option2</option> 
        <option value="">Option3</option> 
        <option value="">Option4</option> 
        <option value="">Option5</option> 
       </select> 
      </div>

Javascript:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    var ht = $("#selectbox").height(); 
    var ht2 = $("#feedback").height(); 
    ht = $("#selectbox").offset().top + (ht-ht2)/2; 
    $("#feedback").offset({ top: ht }); 
}); 
</script>

Source

2011-11-03 06:57:40

ne vaut pas en tout cas d'écrire autant juste pour centrer le texte –

strictement CSS (attribution d'ID sur l'étiquette)

 <div class="element"> 
      <label id="feedback">Feedback: </label> 

      <select multiple="multiple" name="feedback" size="4"> 
       <option value="">Option1</option> 
       <option value="">Option1</option> 
       <option value="">Option2</option> 
       <option value="">Option3</option> 
       <option value="">Option4</option> 
       <option value="">Option5</option> 
      </select> 
     </div>

Et le CSS:

.element select { 
    height: 200px; 
} 

.element label#feedback { 
    margin-top: 85px; 
}

Source

2011-11-03 07:03:41

Comment centrer un élément verticalement dans un div?

Répondre

Questions connexes