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?
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.
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?
not with what little code you've supplied us...
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.
@TheDoc that was it. Easy. Thanks.