I am using the Bartik theme in Drupal 7.15 and would like to have the header logo centered rather than left-aligned, is there some little piece of CSS I can add in with drupal_add_css() that will center the logo image? I need it to center correctly based on the width of the header image, so fake centering just using left padding isn't an option.

Thanks in advance.


A rule like this should do it:

#logo {
  display: block;
  width: 100px; // width of the image
  margin: 0 auto;
|improve this answer|||||
  • That rule doesn't seem to center the logo, and also I don't know the width of the image because the logo will be changed by the admin relatively frequently. – Richard Viney Oct 8 '12 at 16:22
  • Ah that's not much help then. I would try just making the container and the image itself (and maybe the wrapping <a> tab) text-align:center;, that ought to do it – Clive Oct 8 '12 at 16:33
  • Putting in text-align:center; everywhere doesn't seem to do anything to the alignment of the logo image. I'm using Chrome 22. – Richard Viney Oct 9 '12 at 1:27
  • You've probably got some other styles acting on the image already then, perhaps it's floated? – Clive Oct 9 '12 at 6:58
  • Wasn't floated, but I have got it working, thanks for your input with this. – Richard Viney Oct 9 '12 at 9:34

Adding this CSS with drupal_add_css() makes the logo center:

#logo     { padding-left: 50%; }
#logo img { margin-left: -50%; }
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.