代码之家 › 专栏 › 技术社区 › Asool

css-中间带字母的圆圈

angular css html

Asool · 技术社区 · 6 年前

我想这么做

如您所见,图标没有居中。我想把圆圈“拉起”一点,这样看起来就很漂亮了。

这是我的HTML(角度):。

//图标组件

<div>
<I><NG内容></NG内容></I>
&L/DIV & GT;
< /代码> 

//父组件

<div>
<p>使用<应用程序首字母图标>OT</app首字母图标>联系人</p>
&L/DIV & GT;
< /代码> 

//为了简单(忽略角度,所以如果不熟悉,可以忽略上面的内容)

<div>
<P>连接
<DIV>//下面的CSS应用于的DIV
<I>不</I>
&L/DIV & GT;
& lt;/p & gt;
&L/DIV & GT;
< /代码> 

这是我的CSS

div{
显示:内联块;

}

div i {
文本对齐:居中;
边界半径:50%;
背景色:蓝色;
颜色:白色;
字体大小:7px;
填料:3px;
字体样式:普通;
}
< /代码> 

知道怎么做吗?

如您所见,图标没有居中。我想把圆圈“拉起”一点,这样它看起来很漂亮。

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


你知道怎么办吗?

2 回复 | 直到 6 年前

Adam 6 年前

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>

你可以把 position 直接对 i 标签,您可以使用 top, left, right, and bottom

jmalatia 6 年前

添加 vertical-align: middle; 对你 div i CSS垂直对齐圆。

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

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前