Блог

Главная - Вопросы по программированию - Как центрировать кнопки на панели навигации?

Как центрировать кнопки на панели навигации?

#css

#css

Вопрос:

введите описание изображения здесь

Что я должен сделать, чтобы выровнять первые 3 кнопки по центру панели? 

 #navbar{
    list-style-type: none;
    position: relative;
    top: -4px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #212121;
}

Комментарии:

1. предоставьте скрипку из того, что у вас есть?

2. Что вы могли бы сделать, это поместить левые кнопки в div, а затем просто добавить margin: 0 auto; .

Ответ №1:

На панели навигации вы можете поместить эти три в один отдельный div, а затем выровнять его по центру

Ответ №2:

Привет, друзья, чтобы центрировать параметры вашего меню (nav), вам нужно использовать только текстовое правило: center; ,почему ? Поскольку список меню формируется с помощью «li» или » ul», и мы применяем это правило только к списку и готово :), привет из Мексики;)

Ответ №3:

 <html>

<head>
    <style>
        body{
            margin: 0px;
        }
        .navbar{
            height: 60px;
            background-color: #bbb;
            line-height: 60px; //this will center inline elements in your navbar
        }
        .container{
            margin-left: 5%;
            margin-right: 5%;
        }
        .btn{
            background-color: white;
            padding: 10px 20px;
            width: 100px;
            border: none;
            border-radius: 2px;
            display: inline;
        }
        .nav{
            display: inline;
            list-style-type: none;
        }
        .nav li{
            display: inline;
        }
    </style>
</head>
<body>
    <!--Navbar-->
    <nav class="navbar">
        <div class="container">
            <ul class="nav">
                <li><button class="btn">Button1</button></li>
                <li><button class="btn">Button2</button></li>
                <li><a class="btn">amp;<aamp;> Button</a></li>
            </ul>
        </div>
    </nav>
</body>

Приведенный выше код должен работать для вас. Я показал кнопки, используя тег привязки, а также тег кнопки