CODEWITHSUNDEEP
css
Toma Radu-Petrescu
Toma Radu-Petrescu

Reputation: 2262

How to center buttons in navigation bar?

enter image description here

What should I do to align the first 3 buttons in the center of the bar? 

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

Upvotes: 1

Views: 7777

Answers (3)

Ritwik Bhar
Ritwik Bhar

Reputation: 284

<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">&lt;a&gt; Button</a></li>
            </ul>
        </div>
    </nav>
</body>

The above code should work for you. I have shown buttons using anchor tag and also button tag

Upvotes: 0

Sommer
Sommer

Reputation: 109

Hello friends to center a that your menu options (nav) you only need to use the text-aling rule: center; ,why ? Because the menu list are formed by '' li '' or '' ul '' and we only apply this rule to list and ready :), greetings from mexico;)

Upvotes: 0

Sarmad Shah
Sarmad Shah

Reputation: 3805

In your navigation bar you can put these three in one separate div and then align it to center

Upvotes: 1

Related Questions