Why is vertical-align middle not working on my span or div

Question

I m trying to vertically center a span or div element within another div element  However when I put vertical-align  middle  nothing happens  I ve tried changing the display properties of both elements  and nothing seems to work   This is what I m currently doing in my webpage    x000D   x000D   main   x000D    height  72px  x000D    vertical-align  middle  x000D    border  1px solid black  x000D    padding  2px  x000D    x000D       x000D   inner   x000D    vertical-align  middle  x000D    border  1px solid red      x000D    x000D       x000D   second   x000D    border  1px solid blue   x000D    x000D   lt div class  main  gt  x000D     lt div class  inner  gt  x000D      This box should be centered in the larger box x000D       lt div class  second  gt Another box in here lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Here is a jsfiddle of the implementation showing that it doesn t work  http   jsfiddle net gZXWC

User · Answer

Since vertical-align works as expected on a td  you could put a single celled table in the div to align its content    lt div gt       lt table style  width  100   height  100    gt  lt tr gt  lt td style  vertical-align  middle  text-align  center  gt          Aligned content here         lt  td gt  lt  tr gt  lt  table gt   lt  div gt    Clunky  but works as far as I can tell  It might not have the drawbacks of the other workarounds

User · Answer

This seems to be the best way - some time has passed since my original post and this is what should be done now  http   jsfiddle net m3ykdyds 200     CSS file      main       display  table      inner       border  1px solid  000000      display  table-cell      vertical-align  middle        HTML File     lt div class  main  gt       lt div class  inner  gt  This  lt  div gt   lt  div gt

User · Answer

HTML   lt div id  myparent  gt     lt div id  mychild  gt Test Content here lt  div gt   lt  div gt    CSS   myparent     display  table     mychild     display  table-cell    vertical-align  middle      We set the parent div to display as a table and the child div to display as a table-cell  We can then use vertical-align on the child div and set its value to middle  Anything inside this child div will be vertically centered

User · Answer

You should put vertical-align  middle on the inner element  not the outer element  Set the line-height property on the outer element to match the height of the outer element  Then set display  inline-block and line-height  normal on the inner element  By doing this  the text on the inner element will wrap with a normal line-height  Works in Chrome  Firefox  Safari  and IE 8    x000D   x000D   main   x000D      height  72px  x000D      line-height 72px  x000D      border  1px solid black  x000D    x000D   inner   x000D      display  inline-block  x000D      vertical-align  middle  x000D      line-height  normal  x000D    x000D   lt div class  main  gt  x000D       lt div class  inner  gt Vertically centered text lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Fiddle

User · Answer

Just put the content inside a table with height 100   and set the height for the main div   lt div style  height 80px border  1px solid  000000   gt   lt table style  height 100   gt   lt tr gt  lt td style  vertical-align  middle   gt    This paragraph should be centered in the larger box  lt  td gt  lt  tr gt   lt  table gt   lt  div gt

User · Answer

It s simple  Just add display table-cell in your main class    main     height  72px    vertical-align  middle    display table-cell    border  1px solid  000000      Check out this jsfiddle

User · Answer

Setting the line-height to the same height as it s containing div will also work   DEMO http   jsfiddle net kevinPHPkevin gZXWC 7    inner       line-height 72px      border  1px solid  000000

User · Answer

Using CSS3   lt div class  quot outer quot  gt      lt div class  quot inner quot   gt   lt  div gt   Css   outer     display   flex    align-items   center     use  quot justify-content  center  quot  to align elements horizontally Note  This might not work in old IE s

User · Answer

In case you cannot rely on flexbox    Place  child into  parent s center  Works when pixel sizes are unknown  in other words  always  and no problems with IE9  too     x000D   x000D   parent   position  relative    x000D   x000D   child   x000D      position  absolute  x000D      top   50   x000D      left  50   x000D      -ms-transform  translate -50   -50    x000D      transform      translate -50   -50        x000D    x000D   lt div class  parent  style  background lightyellow  padding 6em  gt   x000D     lt div class  child  style  background gold  padding 1em  gt  amp mdash  lt  div gt   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This is a modern approach and it utilizes the CSS Flexbox functionality  You can now vertically align the content within your parent container by just adding these styles to the  main container   main           display  flex          flex-direction  column          justify-content  center      And you are good to go

User · Answer

Here is the latest simplest solution - no need to change anything  just add three lines of CSS rules to your container of the div where you wish to center at  I love Flex Box  LoveFlexBox   x000D   x000D   main   x000D       I changed height to 200px to make it easy to see the alignment     x000D    height  200px  x000D    vertical-align  middle  x000D    border  1px solid  000000  x000D    padding  2px  x000D     x000D       Just add the following three rules to the container of which you want to center at     x000D    display  flex  x000D    flex-direction  column  x000D    justify-content  center  x000D       This is true vertical center  no math needed     x000D    x000D   inner   x000D    border  1px solid  000000  x000D    x000D   second   x000D    border  1px solid  000000  x000D    x000D   lt div class  main  gt  x000D     lt div class  inner  gt This box should be centered in the larger box x000D       lt div class  second  gt Another box in here lt  div gt  x000D     lt  div gt  x000D     lt div class  inner  gt This box should be centered in the larger box x000D       lt div class  second  gt Another box in here lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Bonus  the justify-content value can be set to the following few options    flex-start  which will align the child div to where the flex flow starts in its parent container  In this case  it will stay on top  center  which will align the child div to the center of its parent container  This is really neat  because you don t need to add an additional div to wrap around all children to put the wrapper in a parent container to center the children  Because of that  this is the true vertical center  in the column flex-direction  similarly  if you change the flow-direction to row  it will become horizontally centered  flex-end  which will align the child div to where the flex flow ends in its parent container  In this case  it will move to bottom  space-between  which will spread all children from the beginning of the flow to the end of the flow  If the demo  I added another child div  to show they are spread out  space-around  similar to space-between  but with half of the space in the beginning and end of the flow

User · Answer

I used this to align everything in the center of the wrapper div in case it helps anyone - I found it simplest    x000D   x000D  div wrapper   x000D       --- This works ---    x000D    display  flex  x000D       Align Vertically    x000D    align-items  center  x000D       Align Horizontally    x000D    justify-content  center  x000D       --- ---------- -----    x000D    width  100   x000D    height 100px  x000D    background-color  blue  x000D    x000D  div inner   x000D    width  50px  x000D    height  50px  x000D    background-color  orange  x000D    x000D   lt div class  wrapper  gt  x000D     lt div class  inner  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Try this  works for me very well      Internet Explorer 10    display -ms-flexbox  -ms-flex-pack center  -ms-flex-align center      Firefox    display -moz-box  -moz-box-pack center  -moz-box-align center      Safari  Opera  and Chrome    display -webkit-box  -webkit-box-pack center  -webkit-box-align center      W3C    display box  box-pack center  box-align center

User · Answer

Here you have an example of two ways of doing a vertical alignment  I use them and they work pretty well  One is using absolute positioning and the other using flexbox   Vertical Align Example  Using flexbox  you can align an element by itself inside another element with display  flex  using align-self  If you need to align it also horizontally  you can use align-items and justify-content in the container   If you don t want to use flexbox  you can use the position property  If you make the container relative and the content absolute  the content will be able to move freely inside the container  So if you use top  0  and left  0  in the content  it will be positioned at the top left corner of the container     Then  to align it  you just need to change the top and left references to 50   This will position the content at the container center from the top left corner of the content     So you need to correct this translating the content half its size to the left and top

User · Answer

here is a great article of how to vetical align   I like the float way   http   www vanseodesign com css vertical-centering   The HTML    lt div id  main  gt       lt div id  floater  gt  lt  div gt       lt div id  inner  gt Content here lt  div gt   lt  div gt    And the corresponding style    main      height  250px      floater      float  left     height  50      width  100      margin-bottom  -50px      inner      clear  both     height  100px

User · Answer

To vertically center a span or div element within another div  add position relative to parent div and position absolute to the child div Now the child div can be positioned anywhere inside the div Example below centers both horizontally and vertically    lt div class  parent  gt       lt div class  child  gt Vertically and horizontally centered child div lt  div gt   lt  div gt    css    parent      position  relative     child      position  absolute      top  0      bottom  0      left  0      right  0      margin  auto

[html] Why is vertical-align: middle not working on my span or div?

Examples related to html

Examples related to css