91

How can I vertically center text that is wrapped in a <span>? The <span> must have min-height of 45px. Here is what I am envisioning:

--------                  -------
text

                --->      text   


--------                  -------

I tried vertical-align as well as methods from this article. None of them worked

1
  • I'm suprised that there is no default support in CSS like 'text-center' for horizontal alignment. Flex seems the best way to handle it now.
    – Fox Desert
    Commented Sep 3 at 5:08

10 Answers 10

196

Try using flexbox, all modern browsers support it, with prefixes it also works in IE10.

span {
  min-height: 100px;
  display: inline-flex;
  align-items: center;
  border: 1px solid aqua;
}
<span>vertical center</span>

1
  • 2
    It breaks with text-overflow
    – VityaSchel
    Commented Jul 5, 2022 at 15:43
12

While you are using span, you could simply change the display method to table-cell. Remember, if you are going to use div instead of span, you might need to use another way.

span {
  height: 45px;
  border: 1px solid #444;
  display: table-cell;
  vertical-align: middle;
}
<span>text</span>

0
10

The "old" way to do this, if you need true support for old browsers (that is IE6 & IE7), is to use line-height. This method only allows 1 line of text.

span {
    display: inline-block;
    line-height: 100px;
    border: 1px solid red;
}
<span>vertical center</span>

0
5

You can achieve vertical center text alignment by any of the below approaches based upon which browser your application is going to support.

<span class="vertical-center">Center Text</span>

1) using display: inline-flex; (if you are targeting mordern browsers like Chrome, safari, IE11 and above you can go with flex) Check: Can I use https://caniuse.com/#search=inline-flex

.vertical-center {
  display: inline-flex;
  border: 1px solid #ddd;
  min-height: 100px;
  align-items: center;
}

2) Using display: table-cell; (if you are targeting older browsers too like IE9, go with second approach )

.vertical-center-table-cell {
    display: table-cell;
    border: 1px solid #ddd;
    height: 100px;
    vertical-align: middle;
}

Demo: JSFiddle

4
span{
height: 45px;
display: grid;
align-items: center;
}

enter image description here

4

If you need to align your text inside the span element both horizontally and vertically you can also try the inline-grid display.

span {
display: inline-grid;
align-items: center;
text-align: center;
}

<span>vertically and horizontally centered text spanning over more than just one line</span>
0

span is set to display inline and the example you linked to should work with divs that are set to display block. Trying adding display block to your span and then following the advice in the link. Combining them should get it to work. But then, why use a span?

1
  • @Alex So are lots of block elements. <p> springs to mind first.
    – Mr Lister
    Commented Jun 10, 2016 at 18:38
-1
<div class="container">
  <img src="image.jpg">
  <p>Text goes here</p>
</div>


.container img {
  display: inline-block;
  vertical-align: middle;
}

.container p {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px; /* adjust as needed */
}
-1

I tried the other answers on this page to implement a single-word button as a span with border.

But for some reason I could not get the text inside the span to be the exact same distance from both top- and bottom- borders. So it did not look quite right. Setting "padding: 0px;" did not help.

Putting the button-label inside an inner span and moving it up 1px with relative positioning fixed the problem:

<span>  
  <span
   style=" position : relative;
           top      : -1px;
         "
  >MY BUTTON 
  </span>
</span>
1
  • 1
    Try setting the line height to the same value as your font size. Having those values mismatch can cause the text to be shifted a few pixels to the bottom, which is what your -1px top position seems to "fix".
    – Xyz3R
    Commented Jun 6, 2023 at 8:08
-2

To vertically center text in a span element, you can use CSS flexbox. Here's an example:

<style>
  .container {
    display: flex;
    align-items: center; /* vertically center items */
    justify-content: center; /* horizontally center items */
    height: 100px;
    border: 1px solid black;
  }
</style>

<div class="container">
  <span>Vertically centered text</span>
</div>

In this example, we create a container div with a height of 100px and a border of 1px to visualize the centering. We then use display: flex to enable flexbox layout, and set align-items: center to center items vertically and justify-content: center to center items horizontally. Finally, we place the span element inside the container.

This will vertically center the text in the span element inside the container.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.