Question

I have two nested containers, .button-1×1 and the inner .button-content. I want to express .button-content dimension as a percentage, and if i do the vertical-align property is not running. It runs fine if i do set width and height as px values. Why?

The outer container has its dimension expressed as px values, so i thought i could express the nested dimension as a percentage, this would keep my css more maintenable. But this doesnt work.

Fiddle here: http://jsfiddle.net/pjZ8g/5/

Code:

<style type='text/css'>
.absolute {position:absolute}
.bg-teal {
  background-color:#abc;
}
.button-content {
  width:100%; /** Change this to px, and it will work */
  height:100%; /** Change this to px, and it will work */
  display: table-cell;
  vertical-align: middle;
  text-align:center;
  text-transform:uppercase;
}

.button-1x1 {
  width:230px;
  height:230px;
}
</style>
<div class='button-1x1 relative'>
    <div class='button button-1x1 bg-teal absolute'>
      <div class='button-content'>
        <span>test1</span>
      </div>
    </div>
</div>​

Answer 1

Here’s an alternative approach to techfoobar’s.

Change the <div class='button button-1x1 bg-teal absolute'> styling to include display:table.

See http://jsfiddle.net/pjZ8g/9/