center align icon in circle/disc

debugcn Published at Dev

user1261774

Using CSS, I have a display that places an icon in a circle/disc.

Here is an example of what I have:

But I am struggling at placing the icon in the center of the circle/disc.

I have searched SO (found this post but changing the line-height only expands the disc/circle) & Google, looked at plenty of examples, but I cannot configure my CSS class code to center the icon.

Hoping that someone can suggest an answer.

Here is my 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>

Here is my CSS class:

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
}

Tamil Selvan C

just use

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.