Center Logo Image on Custom CSS

• 

  saskiastarck · Member · Feb 7, 2015 at 1:10 am

  • Copy link
  • Add topic to favorites

  I have been trying for the last three hours to centre my logo image via CSS. I have tried numerous codes and none seem to work. I have never used CSS before so I honestly have no idea if what I am doing is even correct.

  I am using a Mac and I right clicked on my image and went to inspect element where I selected the CSS code for the image. From there I added in below that code:

  img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  }x

  to try and centre the image. Nothing seems to be working. PLEASE HELP ME!

  The blog I need help with is: (visible only to logged in users)

• 

  staff-happychia · Staff · Feb 7, 2015 at 5:39 am

  • Copy link

  Could you please add logo to your blog so I can help you with the CSS to center it.

• 

  saskiastarck · Member · Feb 7, 2015 at 7:18 am

  • Copy link

  I just added it then. Thank you!!

• 

  staff-happychia · Staff · Feb 7, 2015 at 7:46 am

  • Copy link

  Could you add these styles and let me know what you think:

  .wf-active #site-header h2.site-description {
      display:none;
  }
  
  #site-header {
    width: 100%;
    max-width: 100%;
    text-align: center;
    clear:right;
  }
  
  h1.site-title:after {
      display: block;
      content: "Journalist, Fashion lover, Global traveller";
  }

• 

  saskiastarck · Member · Feb 7, 2015 at 7:49 am

  • Copy link

  That looks awesome! However, is there any chance to just centre the image? I kind of liked the text Saskia Starck – Journalist, Fashion Lover, Global Traveller – when it was to the left hand side.

  Seriously thank you so so so much!!!

• 

  staff-happychia · Staff · Feb 7, 2015 at 8:31 am

  • Copy link

  Remove everything I gave you earlier and add this now:

  .wf-active #site-header h2.site-description {
      display: none
  }
  
  #site-header {
      width: 100%;
      max-width: 100%;
      text-align: center;
      clear: right
  }
  
  h1.site-title a{
         display: block;
          text-align: left;
  }
  h1.site-title:after {
      display: block;
      content: "Journalist, Fashion lover, Global traveller";
       text-align: left;
  }

• 

  saskiastarck · Member · Feb 7, 2015 at 9:07 am

  • Copy link

  THANK YOU SO MUCH! That has finally made it work!

• 

  staff-happychia · Staff · Feb 7, 2015 at 9:16 am

  • Copy link

  You are welcome :-)

  Happy blogging.