圆圈/光盘中心对齐图标

Question

使用CSS，我有一个显示器，可以在圆圈/光盘中放置一个图标。

以下是我的例子：

但我正在努力将图标放在圆圈/圆盘的中心。

我搜索了SO（找到了this post，但更改了行高仅扩展了光盘/圆圈）＆amp;谷歌，看了很多例子，但我无法配置我的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>

Answer 2

如果您知道自己的图标高度，最好的方法是：

span.circle_icon {
    position: absolute;
    top: 50%;
    margin-top: -20px; /*if the icon is, for example, 40px in height.
    - (half of icon height) */
}

容器的position: relative;;