Alignement vertical d'un hyperlien d'élément de liste ronde

J'ai un en-tête avec 2 divs, le premier (flottant vers la gauche) est une simple liste horizontale horizontale non ordonnée, qui est correctement centrée verticalement (l'en-tête a la même hauteur que hauteur et alignement vertical: milieu). Le second div est flottant vers la droite, et il a aussi une liste horizontale non ordonnée, mais il a des hyperliens ronds (border-radius: 50%) et aucun texte dedans (ils vont être utilisés comme des icônes, avec le fond -image). Alors que le premier div est aligné correctement quelle que soit la taille de l'en-tête, le second reste en haut.Alignement vertical d'un hyperlien d'élément de liste ronde

Mon code:

#header 
{ 
    background-color: #a3a3a3; 
    color: black; 
    height: 50px; 
    line-height: 50px; 
    vertical-align: middle; 
} 

#header #icons 
{ 
    float: right; 
} 

#header #icons ul 
{ 
    margin: 0; 
    padding: 0; 
} 

#header #icons ul li 
{ 
    list-style-type: none; 
    display: inline-block; 
    float: right; 
} 

#header #icons ul li a 
{ 
    display: inline-block; 
    text-decoration: none; 
    width: 35px; 
    height: 35px; 
    border-radius: 50%; 
    background-color: #787878; 
}

Vous pouvez vérifier le code & résultats ici: https://jsfiddle.net/mf6yg78f/ Comment puis-je aligner verticalement les éléments de la liste ronde? Je préférerais rester à l'écart des flexboxes, etc.

Source

2017-09-30 Vojthas

Donner margin-top: 7px; à #header #icons. Il n'y a pas d'autre option.

body 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: black; 
 
} 
 

 
#wrapper 
 
{ 
 
    width: 80%; 
 
    background-color: white; 
 
    margin: auto; 
 
} 
 

 
#header 
 
{ 
 
    background-color: #a3a3a3; 
 
    color: black; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    vertical-align: middle; 
 
} 
 
#header #links 
 
{ 
 
    float: left; 
 
} 
 

 
#header #links ul 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#header #links ul li 
 
{ 
 
\t list-style-type: none; 
 
\t display: inline-block; 
 
} 
 

 
#header #links li:before 
 
{ 
 
\t content: " | "; 
 
} 
 

 
#header #links li:first-child:before 
 
{ 
 
\t content: none; 
 
} 
 

 
#header #links ul li a 
 
{ 
 
\t text-decoration: none; 
 
\t color: inherit; 
 
} 
 

 
#header #links ul li a:hover 
 
{ 
 
    color: red; 
 
} 
 

 

 
#header #icons 
 
{ 
 
    float: right; 
 
    margin-top: 7px; 
 
} 
 
/* icons on the right side, should also be centered vertically */ 
 
#header #icons ul 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#header #icons ul li 
 
{ 
 
    list-style-type: none; 
 
\t display: inline-block; 
 
    float: right; 
 
} 
 

 
#header #icons ul li:first-child ~ li 
 
{ 
 
\t margin-right: 10px; 
 
} 
 

 
#header #icons ul li a 
 
{ 
 
\t display: inline-block; 
 
\t text-decoration: none; 
 
\t width: 35px; 
 
\t height: 35px; 
 
\t border-radius: 50%; 
 
\t background-color: #787878; 
 
}

<body> 
 
<div id="wrapper"> 
 
    <div id="header"> 
 
    <div id="links"> 
 
     <ul> 
 
     <li><a href="#">Index</a></li> 
 
     <li><a href="#">Login</a></li> 
 
     <li><a href="#">Gallery</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="icons"> 
 
     <ul> 
 
     <li><a href="#"></a></li> 
 
     <li><a href="#"></a></li> 
 
     <li><a href="#"></a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body>

Source

2017-09-30 11:14:09

Il est en fait 7.5px et ce n'est pas la seule option. Vous pouvez définir: #header #icons ul {padding-top: 7.5px} pour obtenir le même résultat. – VXp

Oui, je le sais et je veux dire que sans rembourrage ou marge il n'y a pas d'autre option. –

Si vous ne souhaitez pas utiliser flex, puis essayez d'afficher les éléments sous la table et la cellule de table pour qu'il se comporte comme table. display:table-cell fera l'élément se comportent comme <td> et ainsi vous pouvez ajouter à vertical-align: middle efficacement

essayez de changer le style suivant à:

/* icons on the right side, should also be centered vertically */ 
#header #icons ul 
{ 
    margin: 0; 
    padding: 0; 
    height: 50px; 
    display: table; 
    float: right; 
} 

#header #icons li 
{ 
    list-style-type: none; 
    display: table-cell; 
    text-align: right; 
    vertical-align: middle; 
    width: 35px; 
    padding-right: 10px; 
} 

#header #icons ul li a 
{ 
    display: block; 
    text-decoration: none; 
    width: 35px; 
    height: 35px; 
    border-radius: 50%; 
    background-color: #787878; 
    margin: auto 0; 
    float: right; 
}

Source

2017-09-30 18:12:30 makoi07

Alignement vertical d'un hyperlien d'élément de liste ronde

Répondre

Questions connexes