与左图标CSS3垂直对齐文本

Question

我需要什么？ 将我的文本与来自优雅主题图标的图标垂直对齐。 T

我的问题？图标有一个特定的大小，所以文本不能（垂直）正确地与图标对齐（文本显示在底部）。

这是我尝试过的：

HTML

<!-- Content ================================================== -->
<div class="container margin_60_35">
    <div class="row">    
        <div class="col-md-12">
            <h3 class="nomargin_top page-title">{{ $agenda['fecha'] }}</h3>
            @foreach($agenda['canchas'] as $cancha)
            <div class="panel-group">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="title-group" data-toggle="collapse" href="#collapse1">Cancha {{ $cancha['idCancha'] }}</a>
                        </h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse">
                        <ul class="list-group">
                            @foreach($cancha['turnos'] as $turno)
                              <a class="list-group-item" href="#"><i class="icon_plus_alt"></i>&nbsp;<span class="nav-text"> {{ $turno['hora'] }} ({{ $turno['estado'] }})</span></a>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            @endforeach
        </div><!-- End col-md-9 -->
    </div><!-- End row -->
</div><!-- End container -->
<!-- End Content =============================================== -->

*CSS**

.list-group .list-group-item{
    color: #a94442;
    vertical-align: middle;
}
.nav-text:after{
    position: absolute;
    vertical-align:middle;
}
.icon_plus_alt:before {
    font-size: 32px;
    color: green;
}

我知道这种问题可能被问了多次，但我遵循了数千个教程，但没有任何效果。

谢谢！

Answer 1

我找到了答案：我必须放

vertical-align: middle; 

像这样进入我的图标属性：

.icon_plus_alt:before {
    font-size: 32px;
    color: green;
    vertical-align: middle; 
}

干杯！