How to vertically center a span inside a div

Question

The code    lt div    id  theMainDiv    style       border solid 1px gray      cursor text      width 400px      padding 0px    gt     lt span      id  tag1 outer       style         background  e2e6f0        padding-right 4px        padding-left 4px        border solid 1px  9daccc        font normal 11px arial        color  3c3c3c     gt as lt  span gt   lt  div gt    As it renders now  the span is align the bottom-left corner of the div

User · Answer

As in a similar question  use display  inline-block with a placeholder element to vertically center the span inside of a block element    x000D   x000D  html  body   container   placeholder   height  100     x000D   x000D   content   placeholder   display inline-block  vertical-align  middle    x000D   lt  doctype html gt  x000D   lt html lang  en  gt  x000D     lt head gt  x000D     lt  head gt  x000D   x000D     lt body gt  x000D       lt div id  container  gt  x000D         lt span id  content  gt  x000D          Content x000D         lt  span gt  x000D         lt span id  placeholder  gt  lt  span gt  x000D       lt  div gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Vertical alignment is only applied to inline elements or table cells  so use it along with display inline-block or display table-cell with a display table parent when vertically centering block elements    References   CSS Horizontal and Vertical Centering

User · Answer

Quick answer for single line span  Make the child  in this case a span  the same line-height as the parent  lt div gt  s height   lt div class  parent  gt     lt span class  child  gt Yes mom  I did my homework lol lt  span gt   lt  div gt    You should then add the CSS rules   parent   height  20px     child   line-height  20px  vertical-align  middle          Or you can target it with a child selector    parent   height  20px     parent  gt  span   line-height  20px  vertical-align  middle      Background on my own use of this  I ran into this similar issue where I needed to vertically center items in a mobile menu  I made the div and spans inside the same line height  Note that this is for a meteor project and therefore not using inline css     HTML   lt div class  international  gt             lt span class  intlFlag  gt        flag              lt  span gt      lt span class  intlCurrent  gt        country      lt  span gt      lt span class  intlButton  gt       lt i class  fa fa-globe  gt  lt  i gt     lt  span gt    lt  div gt    CSS  option for multiple spans in a div    international     height  42px      international  gt  span     line-height  42px      In this case if I just had one span I could have added the CSS rule directly to that span    CSS  option for one specific span    intlFlag   line-height  42px      Here is how it displayed for me

User · Answer

See my article on understanding vertical alignment  There are multiple techniques to accomplish what you want at the end of the discussion    Super-short summary  either set the line-height of the child equal to the height of the container  or set positioning on the container and absolutely position the child at top 50  with margin-top -YYYpx  YYY being half the known height of the child

User · Answer

At your parent DIV add  display table    and at your child element add   display table-cell   vertical-align middle

User · Answer

To the parent div add a height say 50px  In the child span  add the line-height  50px   Now the text in the span will be vertically center  This worked for me

[html] How to vertically center a <span> inside a div?

Examples related to html

Examples related to css

Examples related to center