Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to center h1 text and inline-block

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #43111
    wragen22
    Member

    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;

    #126767
    wolfcry911
    Participant

    > any idea why?

    not with what little code you’ve supplied us…

    #126769
    TheDoc
    Member

    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.

    #126782
    wragen22
    Member

    @TheDoc that was it. Easy. Thanks.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.