Question 160341 in CSS Question posted in
Some basic documentation can be found here.

tags How do I center all text inside h2 tags in CSS?

How can I center all text horizontally inside an h2 if some is hardcoded and some is from variable?

<h2 className={styles.title}>{`<${title}>`}</h2>

The ‘<>’ is a bit upper than the title.

This is the title’s css if needed:

.title {
color: crimson;
padding: 20px 0;
margin-left: -50px;
}

enter image description here

Tags:

2

Answers


  1. 0

    The following should do it:

    h2 { text-align: center; }

    Login or Signup to reply.
  2. 0

    It looks like this might be more to do with the font than the styling. As you said, the <> are a few pixels higher than the rest of the text. This is the case in some fonts but not others – for example the monospace font used here on stackoverflow has them in the same line on my screen. You might have better results changing the font to a mono one, using something like:

    .title {
    font-family: monospace;
    text-align: center;
}

    in your css file.
    You may also find this better suits the aesthetic of your website, if I’m reading the context cues in your styling correctly.
    If monospace doesn’t do it for you, take a look on Google Fonts for one which displays the text how you want it to. Just note than slightly unbalanced sharp brackets are not uncommon. If you can’t resolve it by swapping out the font, adding a space between the <> and the text inside will also make the balance look slightly more even as it won’t have the characters so close together. Experiment with different combinations, and see what you like!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search