How can I center Twitter-Bootstrap 3 navbar links?

css twitter-bootstrap centering navbar

43743 просмотра

2 ответа

How can I center the buttons in the jsFiddle I set up so that the buttons are equally spaced and centered within and through-out the navbar?

I have tried different methods such as

display:inline-block;margin:0 auto; text-align:center;

But I cannot get it to work.

If you could give a little explanation instead of just fixing the CSS as I want to learn so I do not have to keep coming back here.

EDIT: Just like how they are centered here ^.

Автор: Ashley Brown Источник Размещён: 13.11.2019 11:33

Ответы (2)

14 плюса


Bootstrap 3 has a nav-justified class that can be used on nav. No extra CSS required:

<div class="container">
  <h3 class="text-muted">Project name</h3>
  <ul class="nav nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>


Based on the comments, to have full-width centered links using the navbar-nav class, use flexbox...

.navbar-center {
    display: flex;
.navbar-center>li {
    flex:1 1 auto;

<div class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav navbar-center text-center">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">More</a></li>
            <li><a href="#">Options</a></li>

Also see
Bootstrap NavBar with left, center or right aligned items
Center Navbar in Bootstrap

Автор: Zim Размещён: 07.08.2013 11:24

3 плюса

Add the style

    text-align: center;

This will center the text in li.

Check Fiddle

These styles should be sufficient. You were trying to apply styles to to the wrong element.

// This is being applied by the bootstrap
// Set it to 25px instead of the default 15px
    padding : 0 25px;

// Gave a width of 110px for each li
// as the container is following a fixed width format
Автор: Sushanth -- Размещён: 07.08.2013 02:32
Вопросы из категории :