JSFiddle - React, Tailwind, and code Playground

by fcalderan

HTML

<!doctype html>
<html lang="it">
<head>
    <meta charset="utf-8" />
    <title>Vertical alignment</title>
</head>
<!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
<ul>
   <li><span>My text</span></li>
   <li><span>My longer text</span></li>
   <li><span>My text, but this time is really really wide.</span></li>
   <li><span>My text, some thoughts about how much it will expand in this item.</span></li>
</ul>
</body>
</html>

CSS

li {
    width           : 200px;
    line-height     : 80px;
    height          : 80px;
    
    border          : 1px #c1c6b5 solid;        
}
span {
    display             : -moz-inline-box;  /* FF2 or lower */
    display             : inline-block;     /* FF3, Opera, Safari */
    line-height         : normal;
    vertical-align      : middle;    
    
    border              : 1px #dfdfdf solid;        
}

.ie7 li span, .ie6 li span { display  : inline;} /* haslayout for IE6/7 */