Center Title Horizontally

  • Resolved atomikpop

    (@atomikpop)


    6 years, 1 month ago

    I would like to set the title width to 80% and center the title over the image. Is there a better way than adding padding on the left side?

    div.big-leader .entry-title.featured-image-overlay,
    div.big-leader .archive-title.featured-image-overlay {
    color: blue;
    max-width: 80%;
    padding-left: 160px;
    }

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Robin Cornett

    (@littlerchicken)

    I would avoid the padding-left as it’s not going to behave very well with smaller screens. What you can do instead is keep your color and max-width, but then make sure the element itself is centered using the margin:

    
div.big-leader .entry-title.featured-image-overlay,
div.big-leader .archive-title.featured-image-overlay {
    color: blue;
    max-width: 80%;
    margin: 0 auto 16px;
}

    The 16px is based on your default headline margin on your site. Hope that helps!

    Thread Starter atomikpop

    (@atomikpop)

    Thanks, Robin!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Center Title Horizontally’ is closed to new replies.