WordPress.org

Ready to get started?Download WordPress

Forums

Leaf
[resolved] Changing header alignment from left to center (20 posts)

  1. naigotsoul
    Member
    Posted 1 year ago #

    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

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    What coding did you try?

  3. naigotsoul
    Member
    Posted 1 year ago #

    #header {
    align: center;
    {

    .header-img {
    align: center;
    }

    We went to the CSS panel not sure if that was the correct spot or not as well...

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    align is not a CSS property, but try this article for centering things http://www.w3.org/Style/Examples/007/center.en.html

  5. naigotsoul
    Member
    Posted 1 year ago #

    .header-image {
    margin-top: 24px;
    margin-top: 2.4rem;
    display: block;
    margin-left: auto;
    margin-right: auto }

    placed this into the CSS as directed by the link. But its still not working. Do we need to identify the source img and if so what does that format look like...? src..?

    Thanks for your help btw if you couldn't tell we're novices to editing CSS lol

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    It looks like you're missing a width style from that code.

  7. naigotsoul
    Member
    Posted 1 year ago #

    .header-image {
    margin-top: 24px;
    margin-top: 2.4rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    width: 300px; }

    and still no luck...

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Where are you adding the code?

  9. naigotsoul
    Member
    Posted 1 year ago #

    In the edit CSS panel. Though I had to go into the advanced code to pull the proper classes because before I didn't have them identified correctly.

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Is the CSS panel named, "Custom CSS" or similar?

  11. alchymyth
    Forum Moderator
    Posted 1 year ago #

    if you could post a live link to your site, someone can check the code and possibly suggest something to center the header image.

  12. naigotsoul
    Member
    Posted 1 year ago #

    http://www.swaytheblog.com/

    I'm under the Edit CSS panel

    Thankyou

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    As you've stated you were incorrectly selecting the image, have you resolved this?

  14. naigotsoul
    Member
    Posted 1 year ago #

    yes

  15. naigotsoul
    Member
    Posted 1 year ago #

    I'm sorry this is not resolved I never heard back about suggestions on the code

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you apply your code;

    .header-image {
    margin-top: 24px;
    margin-top: 2.4rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    width: 300px; }

    To the correct element?

  17. naigotsoul
    Member
    Posted 1 year ago #

    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.

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  19. naigotsoul
    Member
    Posted 1 year ago #

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

  20. fezzle
    Member
    Posted 10 months ago #

    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: http://dannyzeff.com/client/willphelps/

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic