CSS - Circle with letters in the middle - html

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

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;
}

Answer 2

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