recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment aligner le texte de la barre de navigation bootstrap avec l'image ?

J'utilise la barre de navigation bootstrap et j'ai inséré une image dans la marque de la barre de navigation, mais en raison de la taille, cela gâche l'alignement. Je veux que le texte qui l'accompagne soit aligné avec le milieu de celui-ci, mais je ne sais pas comment aligner également le texte de l'autre bouton avec lui.

Voici à quoi ressemble le résultat

<a class ="navbar-brand" id="home" href="/">
                    <img src="https://cdn.discordapp.com/attachments/901496285759168554/1045812932535128084/jeffersonlogo.webp" width="40" height="60" class="d-inline-block align-middle" alt="">
                      Jefferson Robotics</a>
                <a class="nav-item nav-link" id="water" href="/underwater">Underwater</a>
                <a class="nav-item nav-link" id="sky" href="/aerial">Aerial</a>
                <a class="nav-item nav-link" id="earth" href="/land">Land</a>

J'ai essayé d'utiliser l'alignement sur les éléments de navigation mais peu importe ce que je fais cela ne change rien, c'est la première fois que j'utilise bootstrap et mes connaissances en HTML sont limitées donc je n'ai absolument aucune idée de quoi faire : (< /p>

P粉221046425P粉221046425274 Il y a quelques jours429

répondre à tous(2)je répondrai

  • P粉797004644

    P粉7970046442024-03-29 11:06:33

    Je ne sais pas quel est le problème avec votre implémentation. J'ai essayé d'envelopper votre extrait avec un conteneur de navigation comme mentionné dans la documentation bootstrap et ça a l'air bien :

    a.nav-item {
      color: white;
    }
    
    a.nav-item:hover {
      color: yellow;
    }
    sssccc
    [email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    
    

    Peut-être qu'il vous manque juste cet emballage ? Ou peut-être n'avez-vous pas inclus les styles de bootstrap dans les styles statiques de votre fichier HTML ?

    répondre
    0
  • P粉129275658

    P粉1292756582024-03-29 10:36:19

    Vous pouvez essayer toutes les <a> 标记以及 navbar-brand <a> 标记上使用引导程序中的 d-flexalign-items-center classes sur l'élément parent comme indiqué ci-dessous. Cela centrera l'élément verticalement.

    [email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    

    répondre
    0
  • Annulerrépondre