横並びの際の文字の縦位置について

Question

webフォントアイコンを使った際に文字列を横並びにすると微妙に縦位置がズレてしまうので、中央揃えしたいのですが、うまくいきません。
どうしたらよいでしょうか

#css
.mymenu {
    background-color: #fff;
    width: 150px;
    border: 2px solid #665700;
    border-radius:5px;
    margin: 50px 50px;
    font-size: 14px;
    line-height: 30px;
}
.mymenu .user {}
.mymenu .setting {}
.mymenu .signoff {}

.mymenu i {
    font-size: 20px;
    padding-left: 15px;
    padding-right: 5px;
}

.mymenu hr {
    height: 1px;
    border: 0;
    background-color: #665700;
}

#html
<div class="mymenu">
    <div class="user">
        <i class="material-icons">account_circle</i>ユーザー設定
    </div>
    <div>
        <i class="fa fa-cog"></i><div>設定</div>
    </div>
    <hr>
    <div class="signoff"><i class="fa fa-sign-out"></i>ログアウト</div>
</div>

Comments

[hatena19]

css と html は別のコードブロックに分けてください。コードブロックの先頭タグの後ろに言語名を記述してください。

```css
CSSコード
```
```html
HTMLコード
```

Answer 1

インライン要素はvertical-align: middle;で垂直位置を中央にできます。

.mymenu i {
    font-size: 20px;
    padding-left: 15px;
    padding-right: 5px;
    vertical-align: middle; /* 追加 */
}