Vertically align text within a div

Question

The code below  also available as a demo on JS Fiddle  does not position the text in the middle  as I ideally would like it to  I cannot find any way to vertically centre text in a div  even using the margin-top attribute  How can I do this    lt div id  quot column-content quot  gt       lt img src  quot http   i stack imgur com 12qzO png quot  gt       lt strong gt 1234 lt  strong gt      yet another text content that should be centered vertically  lt  div gt     column-content       display  inline-block      border  1px solid red      position relative          column-content strong       color   592102      font-size  18px     img       margin-top -7px      vertical-align  middle

User · Answer

I know it   s totally stupid and you normally really shouldn   t use tables when not creating tables  but   Table cells can align multiple lines of text vertically centered and even do this by default  So a solution which works quite fine could be something like this   HTML    lt div class  box  gt     lt table class  textalignmiddle  gt       lt tr gt         lt td gt lorem ipsum     lt  td gt       lt  tr gt     lt  table gt   lt  div gt    CSS  make the table item always fit to the box div     box        For example      height  300px      textalignmiddle     width  100     height  100       See here  http   www cssdesk com LzpeV

User · Answer

Update April 10  2016 Flexboxes should now be used to vertically  or even  horizontally  align items   x000D   x000D  body       height  150px      border  5px solid cyan       font-size  50px           display  flex      align-items  center     Vertical center alignment        justify-content  center     Horizontal center alignment      x000D  Middle x000D   x000D   x000D   A good guide to flexbox can be read on CSS Tricks  Thanks Ben  from comments  for pointing it out  I didn t have time to update   A good guy named Mahendra posted a very working solution here  The following class should make the element horizontally and vertically centered to its parent   absolute-center           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

To make Omar s  or Mahendra s  solution even more universal  the block of code relative to Firefox should be replaced by the following      Firefox    display  flex  justify-content  center  align-items  center    The problem with Omar s code  otherwise operative  arises when you want to center the box in the screen or in its immediate ancestor  This centering is done either by setting its position to  position  relative  or position static   not with position absolute nor fixed    And then margin  auto  or margin-right  auto  margin-left  auto   Under this box center aligning environment  Omar s suggestion does not work  It doesn t work either in Internet nbsp Explorer nbsp 8  yet 7 7  market share   So for Internet nbsp Explorer nbsp 8  and other browsers   a workaround as seen in other above solutions should be considered

User · Answer

Create a container for your text content  a span perhaps    x000D   x000D   column-content   x000D    display  inline-block  x000D    x000D  img   x000D    vertical-align  middle  x000D    x000D  span   x000D    display  inline-block  x000D    vertical-align  middle  x000D    x000D   x000D     for visual purposes    x000D   column-content   x000D    border  1px solid red  x000D    position  relative  x000D    x000D   lt div id  column-content  gt  x000D   x000D     lt img src  http   i imgur com WxW4B png  gt  x000D     lt span gt  lt strong gt 1234 lt  strong gt  x000D      yet another text content that should be centered vertically lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    JSFiddle

User · Answer

The accepted answer doesn t work for multi-line text   I updated the JSfiddle to show CSS multiline text vertical align as explained here    lt div id  column-content  gt       lt div gt yet another text content that should be centered vertically lt  div gt   lt  div gt    column-content       border  1px solid red      height  200px      width  100px    div       display  table-cell      vertical-align middle      text-align  center      It also works with  lt br   gt  in  yet another

User · Answer

Add a vertical align to the CSS content  column-content strong too    column-content strong               vertical-align  middle      Also see your updated example       UPDATE      With a span around the other text and another vertical align   HTML        lt span gt yet another text content that should be centered vertically lt  span gt        CSS    column-content span       vertical-align  middle      Also see the next example

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    lt span class  textvalignmiddle  gt  lt span gt YOUR TEXT HERE lt  span gt  lt  span gt     textvalignmiddle       line-height     Set height         textvalignmiddle  gt  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 what have you

User · Answer

Try this   HTML   lt div gt  lt span gt Text lt  span gt  lt  div gt    CSS  div       height  100px     span       height  100px      display  table-cell      vertical-align  middle

User · Answer

This is simply supposed to work    column-content           --------     margin-top  auto      margin-bottom  auto      I tried it on your demo

User · Answer

Andres Ilich has it right  Just in case someone misses his comment     A   If you only have one line of text    x000D   x000D  div x000D    x000D    height  200px  x000D    line-height  200px      lt -- this is what you must define    x000D    x000D   lt div gt vertically centered text lt  div gt  x000D   x000D   x000D    B   If you have multiple lines of text    x000D   x000D  div x000D    x000D    height  200px  x000D    line-height  200px  x000D    x000D   x000D  span x000D    x000D    display  inline-block  x000D    vertical-align  middle  x000D    line-height  18px      lt -- adjust this    x000D    x000D   lt div gt  lt span gt vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text lt  span gt  lt  div gt  x000D   x000D   x000D

[css] Vertically align text within a div

Examples related to css

Examples related to vertical-alignment