Jump to content
newcoder1010

How to place the logo in the center of anchor

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.

 

 

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

I tried this but no luck. 

.navbar .logo {
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
}

.pull-left {
    float: none !important;
}

Please advise.

Share this post


Link to post
Share on other sites

Sorry did not see @dsonesuk post.

I tried this and worked. 

.navbar .logo {
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    display: block;
    float: none !important;
}

Thanks.

Share this post


Link to post
Share on other sites

It has to be a block element so it stretches to available width, being its default inline, means it will shrink to content.

Share this post


Link to post
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

×