• Resolved naigotsoul

    (@naigotsoul)


    We just got a new custom logo for our site and would like to have it centered. We tried to play with the CSS but perhaps just didn’t have the right coding in. So how do we do this?

    Thanks

Viewing 4 replies - 16 through 19 (of 19 total)
  • Thread Starter naigotsoul

    (@naigotsoul)

    the correct element is:

    .site-header img

    I applied the suggested code and it didn’t move the item center at all. The height and width properties also distorted the image dimensions.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The problem is, the element containing it has a small set width, therefore the image can only centre within that small width [screenshot].

    Try using a Browser Developer tool for this kind of CSS exploratory work. I used Google Chrome’s built-in developer tool in that example.

    Once you sort out that width, you can sort out the image’s width that is distorted.

    Thread Starter naigotsoul

    (@naigotsoul)

    THANKYOU! redefined the width and it worked!!!!

    I’m also attempting to center a logo, and I’ve tried to follow the steps I read above, but I’m having no success. What am I doing incorrectly?

    The code I added:

    .site-header img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    }

    The site: https://dannyzeff.com/client/willphelps/

Viewing 4 replies - 16 through 19 (of 19 total)
  • The topic ‘Changing header alignment from left to center’ is closed to new replies.