#Dev-co Snippets

ID: 2001 - Centering vertically a span within a label
Posted by andphe on Wed Feb 24 21:40:34 UTC 2010. Language css

/*This css contains hacks for IE, you could put the styles that begins with * under his own stylesheet for IE.

this centers vertically a span within a label <label for="foo"><span>foo</span></label>, tested in Chrome, Firefox 3.6, IE6, IE7, IE8

*/
label {
    display: table;
    *display: block;
    *position: relative;
    width:105px;
    height: 61px;
    margin-top: 5px;
    background-image: url('a_nice_background.png');
}

span {
    zoom: 1;
    display: table-cell;
    *display: block;
    *position: absolute;
    *height: 61px;
    *width: 95px;
    *top: 50%;
    *left: 0px;
    *margin: -24px auto auto auto;
    padding: 5px;
    vertical-align: middle;
}