centering the header image

  • website in question: https://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!

    E

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter Ian Schoonover

    (@iantskon)

    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?

    Cheers!
    Ian

    Theme Author ronangelo

    (@ronangelo)

    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;
    ex.

    #header-logo {
   float: none;
   display: table;
   margin: 0 auto;
}

    Thread Starter Ian Schoonover

    (@iantskon)

    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. ??

    Thanks again!

    Ian

    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.

    Thread Starter Ian Schoonover

    (@iantskon)

    @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
    https://www.quirksmode.org/css/css2/display.html

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

    Thread Starter Ian Schoonover

    (@iantskon)

    you bet,
    cheers

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘centering the header image’ is closed to new replies.