Alignement vertical: milieu pour le noeud de texte - css, alignement vertical, pseudo-élément

J'essaie d'aligner verticalement un bloc de texte. J'ai un :before Le pseudo-élément et ce que je voudrais réaliser, c’est d’aligner les deux au milieu.

Est-il possible d'y parvenir sans emballage supplémentaire? Voici à quoi ressemble mon problème:

HTML:

<div class="fail">Something"s wrong</div>
<div class="success">
<span>Perfect middle</span>
</div>

Échec CSS:

.fail
{
background: orange;
font-size: 30px;
display: inline-block;
}

.fail:before
{
background: red;
content: "✗";
text-align: center;
display: inline-block;
line-height: 60px;
margin-right: 10px;
vertical-align: middle;
width: 60px;
}

Succès CSS:

.success
{
font-size: 30px;
background: lime;
display: inline-block;
}

.success:before
{
background: green;
content: "✓";
text-align: center;
display: inline-block;
line-height: 60px;
margin-right: 10px;
vertical-align: middle;
width: 60px;
}

.success span {
vertical-align: middle;
}

Cette image n’est peut-être pas si évidente, mais celle de gauche est trop haute, avec une différence d’environ 2 ou 3 pixels. C'est important surtout pour les plus petits éléments.

Ma question est donc la suivante: puis-je atteindre un milieu parfait avec un seul tag HTML + :before?

Réponses:

Parce que je n'aime pas trop les éléments en ligne, je le ferais comme ceci:

.fail {
position: relative;
float:left;
padding-right: 10px;
line-height: 60px;
font-size: 30px;
background: orange;

}

.fail:before {
content: "✗";
display: inline-block;
width: 60px;
margin-right: 10px;
text-align: center;
background: red;
}