CSS aligner verticalement LI au milieu

J'ai le code HTML suivant où j'ai besoin des éléments LI pour afficher verticalement au milieu de la zone UL de 21 pixels de haut. Voici mon code HTML ...CSS aligner verticalement LI au milieu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     .MenuBar 
     { 
      padding: 0px; 
      border: 1px solid #036; 
      height: 21px; 
      font-size: 8pt; 
     } 
     .MenuBar li 
     { 
      display: inline; 
      padding-left: 20px; 
     } 
    </style> 
</head> 
<body> 
    <ul class="MenuBar"> 
     <li>Link 1</li><li>Link 2</li><li>Link 3</li></ul> 
</body> 
</html>

Comment modifier le HTML ci-dessus pour obtenir cet effet?

Source

2010-03-04 John Livermore

Je présume que vous essayez de faire une liste horizontale plutôt que verticale, puisque vous définissez le type d'affichage des éléments LI sur "inline". Donc, essayez ceci:

<style type="text/css"> 
    .MenuBar 
    { 
     padding: 0px; 
     border: 1px solid #036; 
     height: 21px; 
     font-size: 8pt; 
    } 
    .MenuBar li 
    { 
     display: inline; 
     line-height: 21px; 
     padding-left: 20px; 
    } 
</style>

Source

2010-03-04 16:39:57 Robusto

Merci pour les réponses rapides de tout le monde! –

Impossible d'obtenir exactement ce que vous voulez, mais si vous voulez faire les listes apparaissent verticalement, essayez ceci:

.MenuBar li 
    { 
     display: block; 
     padding-left: 20px; 
    }

il suffit de changer la propriété display à block au lieu de inline. Et c'est le comportement par défaut aussi.

Source

2010-03-04 16:36:27 Sarfraz

Est-ce ce que vous cherchez? Comme Sarfraz, je ne suis pas sûr de comprendre totalement la question.

Source

2010-03-04 16:39:44 Sniffer

Ajouter line-height:21px-.MenuBar

Source

2010-03-04 16:41:16 Emily

La façon la plus élégante et fiable de le faire est d'insérer un élément en ligne de Assistent dans l'élément <li /> comme le 1er enfant, dont la hauteur doit être réglée sur 100% (de la hauteur de son parent, le <li />), et son alignement vertical mis au milieu. Pour ce faire, vous pouvez mettre un <span />, mais le moyen le plus pratique est d'utiliser li: after pseudo class.

.MenuBar li:before 
{ 
    display: inline; 
    height: 100%; 
    vertical-align: middle; 
    content: ''; 
}

De cette façon, vous n'avez pas besoin de coder en dur une valeur de hauteur (21px ou quelque chose). Reportez-vous à: CSS vertical alignment text inside li

Source

2014-09-30 13:41:25

CSS aligner verticalement LI au milieu

Répondre

Questions connexes