CSS-中间带字母的圆圈

Question

我正在尝试这样做

如您所见，图标未居中。我希望圆被“拉起”一点，以便看起来不错。

这是我的html（角度）：

//图标组件

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

//父组件

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

//为简单起见（忽略角度，因此如果您不熟悉，可以在上方忽略）

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

这是我的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;
}

有什么想法吗？

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

在您的vertical-align: middle; CSS中添加div i，以使圆垂直对齐。

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