Как выровнять текст панели навигации начальной загрузки с изображением?

Я использую панель навигации начальной загрузки, и я вставил изображение в марку панели навигации, но из-за размера она портит выравнивание. Я хочу, чтобы текст, который идет вместе с ним, выровнялся с его серединой, как есть, но я не могу понять, как заставить другой текст кнопки также совпадать с ним.

Вот так это выглядит Вывод

<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>

Я пытался использовать выравнивание для элементов навигации, но это ничего не меняет, что бы я ни делал, это мой первый раз, когда я использую бутстрап, и у меня ограниченные знания html, поэтому я совсем не знаю, что делать :(

html css bootstrap-4

25.11.2022 23:13

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

119

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете попробовать использовать классы d-flex align-items-center из начальной загрузки как для родительского элемента, так и для всех тегов <a>, а также для тега navbar-brand<a>, как показано ниже. Это центрирует элементы по вертикали.

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" />
<div class = "d-flex align-items-center">
  <a class = "navbar-brand d-flex align-items-center" 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>
</div>

25.11.2022 23:29

Не уверен, что не так с вашей реализацией. Я попытался обернуть ваш фрагмент кода контейнером навигации, как указано в документации bootstrap, и все выглядит нормально:

a.nav-item {
  color: white;
}

a.nav-item:hover {
  color: yellow;
}

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" />

<nav class = "navbar navbar-dark bg-dark">
  <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>
</nav>

может быть, вы просто пропустили эту обертку? или, может быть, вы не включили стили для начальной загрузки в свои статические стили в своем HTML-файле?

25.11.2022 23:33

Другие вопросы по теме

Как переместить элемент в сетке из одного раздела в другой

Jinja2.exceptions.TemplateSyntaxError: ожидаемый токен ':', получил '}' в html

Кнопка становится неактивной при изменении цвета фона

Несколько изображений (логотип и фоновое изображение) в титульном слайде xaringan

Наследование семейства шрифтов с переменной css не работает

Позиционирование текста в карточках Masonry с помощью Html и CSS

Как автоматизировать карусель изображений с помощью HTML, JS и CSS?

Почему тег body является контекстом стека, в зависимости от цвета фона тега html

Представление по центру в абсолютно позиционированном Animated.View внутри положения сдвига ScrollView

Как сделать так, чтобы изображения из этого Waifu API отображались на странице?

Как выровнять текст панели навигации начальной загрузки с изображением?

Ответы 2

Другие вопросы по теме

Похожие вопросы