如何垂直对齐div中的文本

Question

嗨，我有以下div

'guards' => [
    'web' => [
        'driver' => 'mysession',
        'provider' => 'users',
    ],
],

如何将每个div垂直居中的内容（glyphicon和文本）对齐？

CSS：

<div align="left">
            <div  class="about inner" valign="middle" style="height:25px;vertical-align: middle;">&nbsp;&nbsp;About
                <span class="pull-right glyphicon glyphicon-menu-right" aria-hidden="true"></span>
            </div><br>
            <div class="work" style="height:25px;vertical-align: middle;">&nbsp;&nbsp;Work
                <span class="pull-right glyphicon glyphicon-menu-right" aria-hidden="true"></span>
            </div><br>
            <div class="contact" style="height:25px;vertical-align: middle;">&nbsp;&nbsp;Contact
                <span class="pull-right glyphicon glyphicon-menu-right" aria-hidden="true"></span>
            </div><br>
        </div>

Answer 1

我有2个解决方案：

1-使用display:table-cell; vertical-align: middle

2-使用position:absolute; transform:translateY(-50%);top:50%

.relative{position:relative;height:300px}
.middle{position:absolute;top:50%;transform:translateY(-50%)}

<div class="relative">
<div class="middle">
<h1>Middle</h1>
</div>
</div>