Grow your CSS skills. Land your dream job.

How to center h1 text and inline-block

  • # March 3, 2013 at 1:18 pm

    Hi there,
    I have a page I am working on where I have h1 titles going down the center of the page.

    I want to set the text to inline-block so I can use transitions ect for different color on just the text only and not the whole row expanding across the page.

    However when I use inline-block the h1 titles move the left. :-/ any idea why?

    h1 {
    font-size: 7em;
    text-align: center;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: 40px;
    font-weight: normal;
    display: inline-block;

    # March 3, 2013 at 1:22 pm

    > any idea why?

    not with what little code you’ve supplied us…

    # March 3, 2013 at 1:33 pm

    That’s because when you display it as inline-block its width will equal the text that’s inside, as opposed to filling up the whole horizontal space like `display: block;` would.

    Try adding text-align: center; to the h1′s parent, instead.

    # March 3, 2013 at 3:22 pm

    @TheDoc that was it. Easy. Thanks.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".