Partage

Problème alignement vertical [bootstrap]

Sujet résolu
19 avril 2017 à 21:07:01

Bonjour à tous, 

Je sollicite votre aide car j'ai un problème sur un projet que je même dans le but de maîtriser bootstrap !

Donc voila le rendu actuelle de la barre de navigation qui me pose problème...

Donc ce que je voudrai faire c'est simplement aligner verticalement tous les onglets...

Pour ça j'ai essayé "vertical-align: middle;" mais pas de résultat !

Voici donc mon code HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>Le Bricoleur</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="col-lg-12">
                <nav class="navbar navbar-default">
                    <ul class="nav navbar-nav">
                        <li><a>Tutoriels</a></li>
                        <li><a><img src="img/icoYT.png" alt="icone_youtube"></a></li>
                        <li><a><img src="img/logo_xs.png" alt="logo_le_Bricoleur"></a></li>
                        <li><a><img src="img/icoFB.png" alt="icone_facebook"></a></li>
                        <li><a>Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </body>
</html>

Et le sass :

.navbar-nav{
    width: 100%;
    text-align: center;    
    
    li{
        width: 20%;
        height: 100%;
        
        a{
            height: 100%;
            vertical-align: middle;
        }
    }
}

Si vous savez comment résoudre ce problème, je vous remercie ! :D

Cordialement, Magrets.


Élève de BTS systèmes numériques !
19 avril 2017 à 21:15:56

Salut,

essaie avec line-height mais il va falloir différencier tes éléments puisque tes image n'ont pas la même hauteur

19 avril 2017 à 21:35:21

Bonjour, je n'ai aucun changement avec le line height... Merci quand même !
Élève de BTS systèmes numériques !
20 avril 2017 à 1:46:32

Salut , pourquoi ne pas faire un text-align: middle directement sur navbar-nav au lieu des <a> ?

-
Edité par _Cecra 20 avril 2017 à 1:49:18

20 avril 2017 à 9:20:34

_Cecra a écrit:

Salut , pourquoi ne pas faire un text-align: middle directement sur navbar-nav au lieu des <a> ?

-
Edité par _Cecra il y a environ 7 heures


D'autant que par défaut, une <a> est de type inline. Donc lui appliquer un vertical-align ne changera rien.

Donc tout simplement : http://www.bootply.com/iWLAJK4oUl

-
Edité par Lord Morpheus 20 avril 2017 à 9:22:32

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
21 avril 2017 à 15:42:59

Merci à vous deux pour cette solution c'est parfait !

Bonne continuation ! :D

Magrets.

Élève de BTS systèmes numériques !

Problème alignement vertical [bootstrap]

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown