vertical-align middle doesn t work

Question

The css property vertical-align  middle does not work in this example   HTML    lt div gt     lt span class  twoline  gt Two line text lt  span gt     lt span class  float  gt   Float right   lt  span gt   lt  div gt    CSS    float       float  right      twoline       width  50px      display  inline-block     div       border  solid 1px blue      vertical-align  middle      The span that is floating on the right is not vertically centered with respect to its containing div   How can I have it vertically centered   The above code is in this fiddle

User · Answer

Vertical align doesn t quite work the way you want it to  See  http   phrogz net css vertical-align index html  This isn t pretty  but it WILL do what you want  Vertical align behaves as expected only when used in a table cell   http   jsfiddle net e8ESb 6   There are other alternatives  You can declare things as tables or table cells within CSS to make them behave as desired  for example  Margins and positioning can sometimes be played with to get the same effect  None of the solutions are terrible pretty  though

User · Answer

The answer given by Matt K works perfectly fine   However it is important to note one thing -  If the div you are applying it to has absolute positioning  it wont work  For it to work  do this -    lt div style  position absolute  hei     gt      lt div style  position relative  display  table-cell  vertical-align middle  hei     gt          lt  -- here position MUST be relative  this div acts as a wrapper-- gt                lt  div gt   lt  div gt

User · Answer

You should set a fixed value to your span s line-height property    float   twoline       line-height  100px

User · Answer

You must wrap your element in a table-cell  within a table using display   Like this    lt div gt     lt span class  twoline  gt Two line text lt  span gt     lt span class  float  gt Float right lt  span gt   lt  div gt    and   float       display  table-cell      vertical-align  middle      text-align  right     twoline       width  50px      display  table-cell    div       display  table      border  solid 1px blue      width  500px      height  100px      Shown here  http   jsfiddle net e8ESb 7

[html] vertical-align: middle doesn't work

Examples related to html

Examples related to css