Wyrównanie pionowe: środkowe dla węzła tekstowego - css, pionowe wyrównanie, pseudoelement

Próbuję wyrównać pionowo bloku tekstu :before pseudoelement i to, co chciałbym osiągnąć, to mieć oba wyrównane do środka.

Czy można to osiągnąć bez dodatkowego opakowania? Oto jak wygląda mój problem:

HTML:

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

Błąd 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;
}

Sukces 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;
}

To może nie być tak oczywiste z tego zdjęcia, ale lewy jest zbyt wysoki, około 2-3 piksele różnicy. Ma to znaczenie zwłaszcza w przypadku mniejszych elementów.

Moje pytanie brzmi: czy mogę osiągnąć idealny środek za pomocą tylko jednego tagu HTML + :before?

Odpowiedzi:

Ponieważ nie lubię elementów wbudowanych tak bardzo, zrobiłbym to tak:

.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;
}