Question

我需要什么？将我的文字与优雅主题图标中的图标垂直对齐。 Ť

我的问题？图标有特定的大小，因此文字没有正确对齐（垂直）图标（底部的文字显示）。

这就是我的尝试：

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

<强>干杯！

垂直对齐左侧图标CSS3

1 个答案: