Jump to content

How to place the logo in the center of anchor


newcoder1010
 Share

Recommended Posts

Hello,

HTML:

<a class="logo navbar-btn pull-left" href="/" title="Home">
          <img src="/sites/default/files/mmmo_0.jpg" alt="Home">
        </a>

My CSS

.logo {text-align:center;}

Currently, image is floated to left I guess because of bootstrap default  pull-left class. When I click on a class in chrome inspect, I get this css:

 
.navbar .logo {
 margin-right: -15px;
 padding-left: 15px;
 padding-right: 15px;
}
.pull-left {
 float: left !important;
}
I wont be able to change any html classes. How can I place the logo in the center of logo class?
 
Thanks.

 

 

Link to comment
Share on other sites

The anchor needs to become a block element if it is not already so, for text-align: to work, and float: none !important; used

.navbar .logo.navbar-btn.pull-left {display: block; float: none !important;}

This along with your current .logo class, IF the img is still inline or inline-block should centre as it would for text.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...