CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user137717
user137717

Reputation: 2165

center nav elements bootstrap

I know things like this have been asked here before, but the previous answers haven't solved my problem. I need to center the nav bar elements on my page. I've tried text-align: center on the div, nav and a tags, but no luck. I need it to be responsive as well so the nav bar stays centered as the page is resized.

       <div>
            <nav class="navbar navbar-default">

              <a class="blog-nav-item" href="">item</a>
              <a class="blog-nav-item" href="">item</a>
              <a class="blog-nav-item" href="">item</a>
              <a class="blog-nav-item" href="/">item</a>
              <a class="blog-nav-item" href="/">item</a>
              <a class="blog-nav-item" href="/">item</a>
              <a class="blog-nav-item" href="/">item</a>
              <a class="blog-nav-item" href="/">item</a>
              <a class="blog-nav-item" href="/">item</a>
            </nav>
        </div>

update: it is slight more centered when I put the div holding the navbar inside my container-fluid and change it to a regular container, but it looks like the text is still not centered in the div. I would also like to keep a container-fluid if I can.

Upvotes: 0

Views: 127

Answers (1)

L.H
L.H

Reputation: 323

Different browsers renders the HTML elements by their own set of rules. This is why you want to make sure to tell the browser not to go all anarchistic on you.

The main problems you might encounter are the rules of the text-align function. It does not work on inline-elements, but on inline-block elements.

See this Fiddle and try it out in your browsers. http://jsfiddle.net/39ppmgdf/

Notice the display:inline-block;

The reason you are experiencing some difficulties here is because of the anchor .

Read the answer of this post to understand more:

What is HTML's <a></a> tag default display type?

Upvotes: 0

Related Questions