How do I align an image center within Bootstrap 3, inside a column, inside the Nav Bar?

0
votes

So I'm trying to center and image within 1 of my columns within the nav bar of my page. I cannot get it to center align no matter what I have tried.

I have tried margin:0 auto with an extra class assigned to the img. I have also tried to use the col-lg-push* and this doesn't seem to help.

Below is my nav bar code:

        <div class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 padding-t45 fbold">
                    Enquire now<br />
                    T: 020 4567 7890
                </div>
                <div class="col-lg-4">
                        <a class="navbar-brand" href="#"><img alt="Logo" src="logo.png" class="img-responsive" /></a>
                </div>
                <div class="col-lg-4 text-right padding-t45">
                        <span class="fab fa-facebook-f" style="font-size:25px; padding-right:20px"></span>
                        <span class="fab fa-twitter" style="font-size:25px; padding-right:20px"></span>
                        <span class="fab fa-instagram" style="font-size:25px; padding-right:20px"></span>
                    <span class="fas fa-bars" style="font-size: 25px;"></span>
                    <p class="fbold">A venue for every event</p>
                </div>
            </div>
1
htmlcssnavbarcenterweb-site-project

1 Answers

0
votes

In bootstrap the selector img-responsive makes the img element display:block. You just need to get rid of it and assign text-align:center to its parent element. Try this code.

.navbar-brand {
  display: block;
  float: none !important;
  text-align: center;
}

.navbar-brand img.img-responsive {
  display: inline-block !important;
}