[resolved] centering the header image (8 posts)

  1. Ian Schoonover
    Posted 1 year ago #

    website in question: http://www.sulu13.net/
    Hi guys, I'm currently working on my personal site and I'd like to center my header image. Currently I have it centered by using the 'margin-left' css code, but that creates an issue at any screen size below 960px wide.
    I tried the margin: 0 auto; code, but I'm missing something, do I need to apply a different display setting and width?

    Thanks in advance!


  2. Ian Schoonover
    Posted 1 year ago #

    I've solved the issue by removing the Frontier header and putting a body text widget in its place.

    I used text-align: center; and it works, but is it the best method?


  3. ronangelo
    Theme Author

    Posted 1 year ago #

    it the best method?

    I don't know.

    But if you want the margin: 0 auto; to work, you have to use it in combination with display: table;

    #header-logo {
       float: none;
       display: table;
       margin: 0 auto;
  4. Ian Schoonover
    Posted 1 year ago #

    Thanks for the tip man, I've been trying to figure this out all night. Even after I got it centered with several methods, it would only center with the browser > 960px, anything smaller and it would disappear.

    I'm working through the codecacademy course right now so I can sharpen my CSS. :P

    Thanks again!


  5. styxlawyer
    Posted 1 year ago #

    Just bumping this topic as this problem has been bugging me too. Can anyone explain why "display: table;" works, but "display: block;" doesn't?

    I just discovered the Frontier theme, what a great find! After struggling for a couple of weeks with various themes including Twenty Fourteen and the derivative Ridizain, I built this test site in just a few hours using Frontier.

  6. Ian Schoonover
    Posted 1 year ago #

    @styxlawyer you might want to start a new thread to get a better response, in the mean time here's a link that may better help you understand the difference between various display properties in CSS

  7. styxlawyer
    Posted 1 year ago #

    @Ian: Thanks for that link, I'll go and have a good look.

  8. Ian Schoonover
    Posted 1 year ago #

    you bet,

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic


No tags yet.