Autarchy of the Private Cave

I was looking to solve this extremely common problem - when you need to vertical-align:top/middle/bottom something within the DIV element. So far not a single solution fits my exact case, but I collected different solutions here for convenient reference.

• vertical-align CSS property should be applied to the inline element within your DIV (which is a block element), and NOT to the DIV itself. For this to work, you may need to set line-height and font-size to the height of the enveloping DIV element:
  PLAIN TEXT
  HTML:

  1. <div>
  2. <img src="/images/demoBoxH.gif" alt="" />
  3. </div>
  PLAIN TEXT
  CSS:

  1. div{
  2.     height:200px;
  3.     width:200px;
  4.     background:blue;
  5.     text-align:center;
  6.     line-height:200px;
  7.     font-size:200px;
  8. }
  9. *>div{
  10.     font-size:12px
  11. }
  12. img{
  13.     vertical-align:middle
  14. }

• there is a different approach: for the element within your DIV, set display:absolute and bottom:0px (or top:0px) to vertically align to bottom or top, respectively. Note that this approach doesn't let aligning to "middle", and that it works best when only one block-level element is aligned - otherwise elements will overlap at the bottom/top of container DIV. Container DIV should be set to position:relative.
• another approach: we can set the container DIV to
  PLAIN TEXT
  CSS:

  1. div {display:table-cell;vertical-align:middle}

  because for table cells vertical-align property works as one might expect from common sense and the text-align property. Basically, by doing so we ask the browser to treat our DIV as a table-cell, where vertical-align works just perfectly. However, this approach appears not to work on most IE browsers (probably except for IE7 only, but I didn't try, as I need IE6 support as well).

• one more table-cell-display-based solution by Nikola:
  PLAIN TEXT
  CSS:

  1. .nav_next a {
  2. display: table-cell;
  3. width: 85px;
  4. text-align: center;
  5. padding-top: 60px;
  6. position: relative;
  7. top: 60px;
  8. margin-top: -60px;
  9. }

  This time, display:table-cell is applied to the immediate text container (anchor in the example), and then padding-top is added to push text to the bottom. Should work in FF3 and IE6; in FF3, this solution worked in a test setup without the last 3 CSS attributes, but YMMV.

• vertical alignment can be simulated with margins, applied to the element(s) within the container DIV. This is a simple approach and I would recommend it, if the heights of the container and elements within it are known (otherwise, this method is of no help). Example application of this method: if you have a DIV container 200px high, and need to position some SPANed text within it; first, set SPAN to
  PLAIN TEXT
  CSS:

  1. span {display:block; height:20px}

  (or whatever height value fits your requirements), and then set margins to vertically align the SPAN. To align your SPAN to top, you would apply

  PLAIN TEXT
  CSS:

  1. span {display:block; height:20px;margin-bottom:180px}

  to your SPAN; to align to bottom -

  PLAIN TEXT
  CSS:

  1. span {display:block; height:20px;margin-top:180px}

  to align in the middle -

  PLAIN TEXT
  CSS:

  1. span {display:block; height:20px;margin:90px 0px}

References:

• reference 1
• reference 2
• reference 3
• reference 4
• reference 5
• another methods collection

(The problem I have involves vertically aligning two DIVs within a container DIV so that DIV1 is aligned to top, and DIV2 is aligned to bottom, and their content is aligned appropriately to top/bottom, and that it works in at least IE6, IE7, FF2. If anyone has a ready solution - please comment. When I find mine, I'll add it to the list above.)