How to center an image using bootstrap in the bootstrap Navbar?

Asked

Viewed 2,265 times

1

I have a big question on bootstrap, I created a Navbar using the standard bootstrap classes.... the problem is that I can not center a logo in the center of the navbar, works only the positioning from left to right.... would like a solution that is bootstrap standard,the code is like this. 

<nav class="navbar navbar-default">


<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

  <a class="navbar-brand" href="#">
    <img alt="Brand" src="img/logo-3.svg" width="50px">
  </a>

</div>
html css twitter-bootstrap

  • Center relative to the navbar/screen or relative to the space left due to the button (in this case, more to the left of the screen)?

  • In case it would center on the navbar/screen

1 answer

2


To center against the screen, use the css next:

.navbar-header {
    float: left;
    padding: 3px; /*opcional*/
    text-align: center;
    width: 100%;
}

.navbar-brand {
    position: absolute;
    float: none;
}

  • Thank you very much Jhonatan !

  • I am glad to have helped. If the answer is in accordance with what you needed don’t forget to accept it as correct. Hug!

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.