MCP_infiltrator MCP_infiltrator - 3 months ago 8
CSS Question

Trying to center <img> in container in navbar

I have a logo I am trying to center brand logo in a navbar on the left but centered in the box.

Here is what I currently have:

enter image description here

Here is the styling

<style>
.navbar {
margin-bottom: 0;
background-color: #E0E0E0;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
}
.navbar li a, .navbar .navbar-brand {
color: #000000 !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
color: #000000 !important;
background-color: #fff !important;
}

.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}

.jumbotron {
background-color: #F5F5F5;
}

footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
margin-top: 20px;
color: #000000;
}

.navbar-brand {
border: 2px solid black;
}

</style>

<body>
<!-- add navigation bar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="index/img/manchucorp_black.svg" alt="" width="40" height45="40">
</a>
<div class="collapse navbar-collapse" id="myNavBar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>


I have been driving myself nuts making new div's, containers etc etc and just cannot seem to get the image in the center of the black box.



.navbar {
margin-bottom: 0;
background-color: #E0E0E0;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
}
.navbar li a,
.navbar .navbar-brand {
color: #000000 !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
color: #000000 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
.jumbotron {
background-color: #F5F5F5;
}
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
margin-top: 20px;
color: #000000;
}
.navbar-brand {
border: 2px solid black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<!-- add navigation bar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://lorempixel.com/500/500/" alt="" width="40" height="40">
</a>
<div class="collapse navbar-collapse" id="myNavBar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#team">Team</a>
</li>
<li><a href="#services">Services</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>




Answer
.navbar-brand {
  position: relative;
  width: 100px;
}

.navbar-brand > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Try this one. Hope it help.