Flavius Dolha Flavius Dolha - 1 year ago 119
CSS Question

Bootstrap image on navbar

I have to say that i am a beginner in web design, I am trying to make a website with bootstrap and Dreamweaver CC and I have navbar and I am wondering how can a place an image at the center of the navbar but to be on the same row. Can you guys please help me?

<div class="navbar-header">
<center><img src="71f7c350c2d7d3a6eb8394f66185a3e7.jpg" alt="" width="40" height="54"/></center>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1"><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="#">Liceul Teoretic "Victor BabeČ™"</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<!-- /.navbar-collapse -->
<!-- /.container-fluid -->

Answer Source

you could use absolute positioning to get the img in the center.

img {
    position: absolute;
    left: 50%;
    margin-left: -50px !important; //this pixel amount is equal to half your image size
    display: block;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download