CSS - Circle with letters in the middle

Question

I'm trying to do this

As you can see, the icon is not centered. I want the circle to be "pulled up" a bit so it looks nice.

Here is my html (angular):

// Icon component

<div>
    <i><ng-content></ng-content></i>
</div>

// Parent Component

<div>
    <p>Connect with <app-initials-icon>OT</app-initials-icon> {{ contact }} </p>
</div>

// For Simplicity (ignoring angular, so you can ignore above if you're not familiar)

<div>
    <p>Connect with
       <div> // the div that the css below applies to
           <i>OT</i>
       </div>
    </p>
</div>

Here is my css

div {
    display: inline-block;

}

div i {
    text-align: center;
    border-radius: 50%;
    background-color: blue;
    color: white;
    font-size: 7px;
    padding: 3px;
    font-style: normal;
}

Any idea how?

Answer 1

 div { display: block; } div i { text-align: center; border-radius: 50%; background-color: blue; color: white; font-size: 7px; padding: 3px; font-style: normal; } i { position: relative } i.one { top:-15px; } i.two { bottom:-15px; } 

 <div> <p>Connect with <div> // the div that the css below applies to <i class="one">OT</i> </div> </p> </div> <br/> <br/> <br/> <br/> <br/> <div> <p>Connect with <div> // the div that the css below applies to <i class="two">OT</i> </div> </p> </div> 

You can put position directly on the i tag and you can control it's x and y using top, left, right, and bottom

Answer 2

Add vertical-align: middle; to your div i css to vertically align the circle.

Full css:

div {
    display: inline-block;

}

div i {
    text-align: center;
    border-radius: 50%;
    background-color: blue;
    color: white;
    font-size: 7px;
    padding: 3px;
    font-style: normal;
    vertical-align: middle;
}