css Question posted in
Some basic documentation can be found here.

Css – How to center font vertically in it's line-height

Im trying to implement a special font called ‘Hagrid’ which was bought by the client here: https://www.fontspring.com/fonts/zetafonts/hagrid

Demo-page: https://fonttest.web-fuchs.net/

When using the font on the website it is not vertically aligned to the line. On the site: fonttest.web-fuchs.net you can see the first H1 is in Hagrid font. There you can see that the Text is not centered to its own line-height. At the ‘sans H1’ for example, you can see what I would expected normally of a font: that it’s letters are centered to its own line-height. The italic version however seems to work better, but maybe a bit too low.

Is the problem the font itself or is it possible to fix that somehow with css?

line-height is set to 1

enter image description here

Tags:

2

Answers


  1. 0

    If you want to center ‘h1’ and ‘p’ elements horizontally, you need to assign ‘text-align: center’ to the parent div in CSS.

    Login or Signup to reply.
  2. 0

    Add text-align: center; CSS property on the tag.

    As I saw your webpage has only <h1> and <p> tags.

    So you can add new style like this

    h1, p {
    text-align: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search