Слишком много горизонтального пространства в навигационной панели Bootstrap 4 с центрированным изображением в навигационных ссылках?

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

Расположение изображения и текста правильное, но между навигационными ссылками есть какое-то странное горизонтальное пространство, и я не смог понять, откуда оно взялось. Любая помощь?

Пример:

https://jsfiddle.net/4zghtcd0/

.planet {
    position: relative;
    height: auto;
    margin: auto;
    text-align: center;
}

.planet img {
    width: 10%;
}

.planet a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <title>Document</title>
    <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin = "anonymous"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin = "anonymous"></script>
    <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin = "anonymous"></script>
</head>

<body>
    <nav class = "navbar navbar-expand-lg">
        <div class = "" id = "navbarSupportedContent">
            <ul class = "navbar-nav">
                <li class = "nav-item">
                    <span class = "planet" style = "top: -1rem">
                        <img src = "https://www.goodfreephotos.com/cache/vector-images/kawaii-earth-vector-clipart_800.jpg" />
                        <a class = "nav-link active">HOME</a>
                    </span>
                    <!--<a class = "nav-link" href = "#">home</a>-->
                </li>
                <li class = "nav-item active">
                    <a class = "nav-link" href = "#">|</a>
                </li>
                <li class = "nav-item active">
                    <a class = "nav-link" href = "#">BAR</a>

                </li>
            </ul>
        </div>
    </nav>
</body>

</html>

Ваш .planet img { width: 10%; } путается с макетом, если вы используете .planet img { width: 100px; }, например, он работает

— 11.03.2019 19:33

@Лукас Спасибо! С этим исправлением все становится именно так, как я хотел.

— 11.03.2019 19:51

html css twitter-bootstrap

11.03.2019 19:23

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Jquery Chosen не показывает заполнитель данных, если он содержится в пользовательском сворачиваемом div

Css: нижняя граница выталкивает содержимое из центра

Как перевести элемент, чтобы он действовал как одометр

Порядок наложения CSS, элемент преобразования нарушает абсолютный родственный элемент

Display: flex не будет правильно отображаться в IE11

Звездный рейтинг не отображается должным образом

Как отлаживать jQuery в консоли?

Прикрепленное положение не вступает в силу

Slick Slide Carousel, показывающая части соседних изображений

Размер и положение элемента треугольника div относительно его родителя

Слишком много горизонтального пространства в навигационной панели Bootstrap 4 с центрированным изображением в навигационных ссылках?

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

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