0

This is a similar question and the answers either wrap another element or specify height: How do I vertically align something inside a span tag?

Is it possible to do this:

        <span style="
                  background-color:linen;
                  font-size: 2rem; 
                  font-weight: 500; 
                  padding: 2rem;">
CENTER ME VERTICALLY
            </span>

And get CENTER ME VERTICALLY to do so without specifying height. I can get this to work with flex box and element wrapping, but I'm wondering if there is a simpler more elegant way to do it?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Ole
  • 41,793
  • 59
  • 191
  • 359
  • 1
    to center vertically based on what? you text define the height of the span so it's already vertically aligned – Temani Afif Apr 20 '20 at 21:09
  • 2
    default value is line-height: normal. You can change it. That's the only thing you can specify if you don't want to specify height. – Evik Ghazarian Apr 20 '20 at 21:15
  • I added background color. Notice that the text is not aligned vertically. – Ole Apr 20 '20 at 21:45
  • 1
    I'm confused. If your display is set to inline-block, then why did you accept the answer that says to set it to inline-block? – j08691 Apr 20 '20 at 22:04
  • See comment at top. – Ole Apr 20 '20 at 22:05
  • 1
    you don't add answer to the question. A question need to remain a question – Temani Afif Apr 20 '20 at 22:21
  • 1
    also your issue isn't a centring issue but the fact that padding on inline element does't affect the layout. Add padding to the body element to notice this: https://jsfiddle.net/gq9s6wcm/ – Temani Afif Apr 20 '20 at 22:23

1 Answers1

1

I hope this will answer your question.

You are using span which display is inline. try to add display: inline-block if you want to use span

Riku
  • 652
  • 1
  • 9
  • 24