Center the elements of a navbar on bootstrap

Question

I want the elements of a navbar to be on the center, I have the following html:

<div class="navbar navbar-default navbar-fixed-bottom" style="bottom:50px; background:none; border:0px; box-shadow:none;">
            <div class="navbar-inner" style="float: none;">  
                <div class="container-fluid" >
                    <ul class="nav navbar-nav" >   
                      <li><img class="social-media" src="images/facebook.png"></li>
                      <li><img class="social-media" src="images/twitter.png"></li>
                      <li><img class="social-media" src="images/linkedin.png"></li>
                    </ul>  
                </div>
            </div>
        </div>

and here is my css:

.social-media {
    opacity: 0.4;
    margin-left: 15px;
    width: 32px;
    height: 32px;
}

.social-media:hover {
    opacity: 1;
    margin-left: 15px;
    width: 32px;
    height: 32px;
}

enter image description here

I tried to use text-align:center; on navbar inside the html but it didnt work. Any idea how can I solve this?

I've tried to change the bootstrap.css to

    @media (min-width: 768px) {
  .navbar-nav {
    float: none;
    margin: 0 auto;
    float: none;
    width: 100%;
  }
  .navbar-nav > li {
     float: none;
     text-align: center;
  }

and now I have this: enter image description here

after editing bootstrap.css to :

 .navbar-nav {
    margin: 0;
    display:inline-block !important;
    float:none !important;
  }

I finally got: enter image description here

Deepak Sharma · Accepted Answer · 2014-03-23T12:13:26.050

1

i think you need to set the float:none; on UL and text-align:center; on parent of UL

try the below css on UL and

*remember I am considering bootstrap 2.3.2 version NOT v3.X (if any not sure) if u are using other version let me know.. *

.navbar-nav {
    display:inline-block !important;
    float:none !important;
}

.container-fluid {
width: 100%;
text-align:center;
}

check the below bootstrap sample

edited Mar 23 '14 at 12:13

answered Mar 23 '14 at 12:05

Deepak Sharma

4,124
1
14
31

Kard Nails · Answer 2 · 2014-03-23T11:31:29.440

0

Try this:

.navbar-nav {
    width: 100px;
    margin: 0 auto;
}

.container-fluid {
width: 100%;
text-align: center;
}

By setting the left and right margins to auto, you are telling it to make both margins the same, which will center it. Do not remove the text-align: center.

edited Mar 23 '14 at 11:31

answered Mar 23 '14 at 10:54

Kard Nails

157
1
8

it didnt help actually – Avraam Mavridis Mar 23 '14 at 11:27
Answer edited. Tested it and it works with the sample you provided. – Kard Nails Mar 23 '14 at 11:31

score 0 · Answer 3 · answered Mar 23 '14 at 11:30

0

If you have set .navbar-nav li as inline-block, add text-align:center to .navbar-nav, this will position your icon in the center of navabar.

.navbar-nav{
    text-align:center;
}

.navbar-nav li{
    display:inline-block;
}

answered Mar 23 '14 at 11:30

James

4,540
1
18
34

I changed the bootstrap.css adding your suggestion but nothing really happens. Thank you anyway. – Avraam Mavridis Mar 23 '14 at 11:35

Center the elements of a navbar on bootstrap

3 Answers3