Maison > Questions et réponses > le corps du texte
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粉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 ?
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" />