newcoder1010 Posted April 30, 2018 Share Posted April 30, 2018 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 More sharing options...
Ingolme Posted April 30, 2018 Share Posted April 30, 2018 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 More sharing options...
dsonesuk Posted April 30, 2018 Share Posted April 30, 2018 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 More sharing options...
newcoder1010 Posted April 30, 2018 Author Share Posted April 30, 2018 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. Link to comment Share on other sites More sharing options...
newcoder1010 Posted April 30, 2018 Author Share Posted April 30, 2018 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 30, 2018 Share Posted April 30, 2018 It has to be a block element so it stretches to available width, being its default inline, means it will shrink to content. Link to comment Share on other sites More sharing options...
newcoder1010 Posted April 30, 2018 Author Share Posted April 30, 2018 Thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now