How to vertical align an inline-block in a line of text

Question

I want to create an inline-block that will take on some unknown width and height   It ll have a table inside it with content dynamically generated    Further  the inline-block should be placed inside a line of text  such as  quot my text  BLOCK HERE  quot    To make it look pretty  I m trying to make the block be vertically centered in the line   So if the block looks like this  TOP MIDDLE BOTTOM  Then the line of text will read   quot My text    MIDDLE    quot   with TOP and BOTTOM above and below the line  Here s what I have so far  CSS  example     background-color   0A0    display  inline-block    margin  2px    padding  2px    position  relative    text-align  center     HTML  lt div class  quot example quot  gt TOP lt br   gt MIDDLE lt br   gt BOTTOM lt  div gt

User · Accepted Answer

x000D   x000D  code   x000D      background  black  x000D      color  white  x000D      display  inline-block  x000D      vertical-align  middle  x000D    x000D   lt p gt Some text  lt code gt A lt br   gt B lt br   gt C lt br   gt D lt  code gt  continues afterward  lt  p gt  x000D   x000D   x000D    Tested and works in Safari 5 and IE6

User · Answer

display  inline-block is your friend you just need all three parts of the construct - before  the  quot block quot   after - to be one  then you can vertically align them all to the middle  Working Example  it looks like your picture anyway     CSS  p  div     display  inline-block     vertical-align  middle    p  div     display  inline  ie7     hack for IE7 and below       table     background   000     color   fff     font-size  16px     font-weight  bold  margin  0 10px     td     padding  5px     text-align  center     HTML   lt p gt some text lt  p gt    lt div gt     lt table summary  quot  quot  gt     lt tr gt  lt td gt A lt  td gt  lt  tr gt     lt tr gt  lt td gt B lt  td gt  lt  tr gt     lt tr gt  lt td gt C lt  td gt  lt  tr gt     lt tr gt  lt td gt D lt  td gt  lt  tr gt     lt  table gt   lt  div gt    lt p gt continues afterwards lt  p gt

[html] How to vertical align an inline-block in a line of text?

Examples related to html

Examples related to vertical-alignment

Examples related to css