CSS alignement des travées, les entrées et les boutons

Je suis à la recherche d'un moyen d'aligner un certain nombre d'éléments (les travées, les entrées et les boutons), telle que, malgré leur diversité de taille, de leur verticale du point milieu est sur la même ligne horizontale:
CSS alignement des travées, les entrées et les boutons

Comment puis-je mettre cela en CSS? Voici le fichier HTML à jouer avec:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
    <style>
.content { font-size: 18px; border: 1px dotted blue;  }
.content input, .content button { font-size: 40px; float: left; }
.label { border: 1px dotted red; float: left; }
.clear { clear: both; }
    </style>
</head>

<body>
<div class="content">
    <span class="label">Label: </span><input type="text">
    <span class="label">More text: </span><input type="text">
    <button type="submit">Submit Me</button>
    <div class="clear"></div>
</div>

</body>

</html>
Tada! brunildo.org/test/inline-block.html - découvrez le vertical-align: middle tests.

OriginalL'auteur Parand | 2011-05-12