How do I vertically align something inside a span tag

Question

How do I get the  x  to be vertically-aligned in the middle of the span    foo       height  50px      border  solid black 1px      display  inline-block      vertical-align  middle      lt span class  foo  gt     x  lt  span gt

User · Answer

This is the simplest way to do it if you need multiple lines. Wrap you span'd text in another span and specify its height with line-height. The trick to multiple lines is resetting the inner span's line-height.

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
    line-height: /*set height*/;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /*set line height back to normal*/
}

DEMO

Of course the outer span could be a div or whathaveyou

User · Answer

Set padding-top to be an appropriate value to push the x down  then subtract the value you have for padding-top from the height

User · Answer

The flexbox way    foo       display  flex      align-items  center      justify-content  center      height  50px

User · Answer

this works for me  Keltex said the same    foo   height  50px         foo span  vertical-align  middle       lt span class  foo  gt   lt span gt middle  lt  span gt  lt  span gt

User · Answer

The vertical-align css attribute doesn t do what you expect unfortunately  This article explains 2 ways to vertically align an element using css

User · Answer

Be aware that the line-height approach fails if you have a long sentence in the span which breaks the line because there s not enough space  In this case  you would have two lines with a gap with the height of the N pixels specified in the property   I stuck into it when I wanted to show an image with vertically centered text on its right side which works in a responsive web application  As a base I use the approach suggested by Eric Nickus and Felipe Tadeo    If you want to achieve     and this      x000D   x000D   container   x000D      background  url   https   i imgur com tAlPtC4 jpg    no-repeat  x000D      display  inline-block  x000D      background-size  40px 40px     image s size    x000D      height  40px     image s height    x000D      padding-left  50px     image s width plus 10 px  margin between text and image     x000D    x000D   x000D   container span   x000D      height  40px     image s height    x000D      display  table-cell  x000D      vertical-align  middle  x000D    x000D   lt span class  container  gt  x000D       lt span gt This is a centered sentence next to an image lt  span gt  x000D   lt  span gt  x000D   x000D   x000D

User · Answer

Use line-height 50px  instead of height  That should do the trick

User · Answer

CSS vertical center image and text  I have Create one demo for vertical image center and text also i have test on firefox  chrome safari  internet explorer 9 and 8 too   It is very short and easy css and html  Please check below code and you can find output on screenshort   HTML   lt div class  frame  gt       lt img src  capabilities icon1 png  alt      gt   lt  div gt    CSS     frame           height  160px                width  160px          border  1px solid red          white-space  nowrap          text-align  center  margin  1em 0              frame  before           display  inline-block          height  100           vertical-align  middle          content                img           background   3A6F9A          vertical-align  middle          Output enter image description here

User · Answer

I needed this for links  so I wrapped the span with an a-tag and a div  then centered the span tag itself  HTML   lt div gt       lt a class  tester  href     gt           lt span gt Home lt  span gt       lt  a gt   lt  div gt    CSS   tester      display  inline-block      width  9em      height  3em      text-align  center     tester gt span      position  relative      top  25

[html] How do I vertically align something inside a span tag?

Examples related to html

Examples related to css