Jump to content

How to place the logo in the center of anchor


newcoder1010

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

You'll have to override the float rule using the !important declaration. Then you can center the link by setting the text-align property of the .navbar element.

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
×
×
  • Create New...