CODEWITHSUNDEEP
htmlcss
Patricia Vu
Patricia Vu

Reputation: 1

Center Logo in the navbar

I'm having trouble centering my logo in the navbar. I've looked through other posts, but none of the solutions seem to work without messing something else. I don't understand why the logo won't center and I need the site to be responsive. 

<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-faded">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Recruitment</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="events.html">Events</a>
            </li>
        </ul>
    </div>

    <div class="mx-auto order-0">
      <a class="navbar-brand mx-auto" href="template.html">
        <img src = "logo.png" width="100" alt="logo thing">
      </a>
    </div>

    <div class="hamburger-menu">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Leadership</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Sisterhood</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Philanthropy</a>
            </li>
        </ul>
    </div>
</nav>

Here's the css for the html. 

.navbar>.container .navbar-brand-centered, 
.navbar>.container-fluid .navbar-brand-centered {
    margin-left: -80px;
    position: relative;
    float: center;
    }
}


.navbar{
  font-family: Montserrat;
  font-size: 1em;
}

/* change spacing for nav items*/
.navbar-expand-md .navbar-nav .nav-link {
    padding-right: 2.5rem;
    padding-left: 2.5rem;
}

.nav-item, .navbar-nav{
  font-family: Montserrat;
}

Upvotes: 0

Views: 77

Answers (2)

Ronnie Smith
Ronnie Smith

Reputation: 18585

An img element responds to text-align: center just fine. 

html, body {
  width:100%;
  text-align: center;
}
<img src="https://telecomputingarchitects.com/media/logo.png" alt="logo" height="48">

Upvotes: 0

Geuis
Geuis

Reputation: 42297

.navbar>.container .navbar-brand-centered, 
.navbar>.container-fluid .navbar-brand-centered {
    margin-left: -80px;
    position: relative;
    float: center;
    }
}

You have an extra breaking bracket after float:center;.

There is no such thing as float:center;

There are a variety of ways to center things. The easiest is to:

.parent-element {
  display: flex;
  justify-content: center;
}

If the parent is position: relative, you can make the target element position absolute and do this https://codepen.io/anon/pen/EQGgpM:

.parent-element {
  position: relative;
  width: 200px;
  height: 50px;
  outline: 1px solid #000;
}

.child {
  position: absolute;
  outline: 1px solid #cc0000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Upvotes: 3

Related Questions