Problème alignement vertical [bootstrap]

Sujet résolu

MagretsDeCanard

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 !

Cordialement, Magrets.

florianboy01

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

MagretsDeCanard

19 avril 2017 à 21:35:21

Bonjour, je n'ai aucun changement avec le line height... Merci quand même !

MrQu3ntin

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 MrQu3ntin 20 avril 2017 à 1:49:18

Lord Morpheus

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

MagretsDeCanard

21 avril 2017 à 15:42:59

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

Bonne continuation !

Magrets.