html - 圆圈/圆盘中的中心对齐图标

Question

使用 CSS，我有一个将图标放置在圆圈/圆盘中的显示。

这是我的例子:

但我很难将图标放在圆圈/圆盘的中心。

我已经搜索过 SO(找到 this post 但更改行高只会扩展圆盘/圆圈)和 Google，查看了大量示例，但我无法配置我的 CSS 类代码以使图标居中。

希望有人能给出答案。

这是我的 html:

<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: silver;">
    <div class="row">
        <span class="circle_icon" dir="ltr" style="direction: ltr;">
          <icon class="fa fa-graduation-cap" style="font-size: 70px;"></icon>
        </span>
    </div>
    <div class="row">
        <b>University Name</b>
    </div>
</div>

这是我的 CSS 类:

span.circle_icon {
    background: #fff;
    border-radius: 8em;
    -moz-border-radius: 8em;
    -webkit-border-radius: 8em;
    box-shadow:  0 0 0 6px #000;
    color: #000;
    display: inline-block;
    font-weight: bold;
    line-height: 10em;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
    vertical-align: middle;
    width: 10em
}

Answer 1

只是使用

icon {
  vertical-align: middle;
 }

span.circle_icon {
    background: #fff;
    border-radius: 8em;
    -moz-border-radius: 8em;
    -webkit-border-radius: 8em;
    box-shadow:  0 0 0 6px #000;
    color: #000;
    display: inline-block;
    font-weight: bold;
    line-height: 10em;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
    vertical-align: middle;
    width: 10em
}
icon {
  vertical-align: middle;
 }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: silver;">
    <div class="row">
        <span class="circle_icon" dir="ltr" style="direction: ltr;">
          <icon class="fa fa-graduation-cap" style="font-size: 70px;"></icon>
        </span>
    </div>
    <div class="row">
        <b>University Name</b>
    </div>
</div>