代码之家 › 专栏 › 技术社区 › D T

为什么按钮的文本不在中间对齐?

css html

0

D T · 技术社区 · 6 年前

这是HTML:

<button class="btncicle" >+</button>

CSS:

.btncicle {
    border-radius: 50%;
    width:15px;
    height:15px;
    padding: 0px;
    text-align:center; 
    vertical-align:middle;
    line-height: 15px;
}

我使用了垂直对齐或行高,但按钮的文本仍然没有对齐到中间。

为什么按钮的文本不在中间对齐?

5 回复 | 直到 6 年前

1

1

user6875318user6875318 6 年前

试试这个: 更改“线条高度”属性。

线高:50%;

2

1

Alfin Paul 6 年前

用这个

再增加1个像素

.btncicle
{border-radius: 50%;
width: 16px;
height: 16px;
padding: 0;

text-align: center;
vertical-align: middle;
border: 1px solid;
line-height: 50%;
text-align:center;
}

<button class="btncicle" >+</button>

3

1

Pons Purushothaman 6 年前

请设置 border:none 对于按钮,将固定对齐。

如果您需要按钮边框,我们有另一种解决方案。你可以设定 box-sizing: content-box; 是的。实际上它是默认值,但在本例中不应用。所以你把它添加到css中。

4

0

Toan Lu 6 年前

您可以添加另一个 <span> 按钮内部使用 display: flex 为了这个案子。

整体上是一致的,即使你改变了按钮的大小。

问题是这个角色 font-size 有点大。如果你减少 字体大小 或者不断增加按钮,然后 + 性格肯定在中间。

.btncircle {
  border-radius: 50%;
  width: 15px;
  height: 15px;
  padding: 0px;
}

.btncircle span {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1px;
}


.btncircle2 {
 width: 25px;
 height: 25px;
}

.btncircle3 {
 width: 45px;
 height: 45px;
}

<button class="btncircle"><span>+</span></button>

<button class="btncircle btncircle2"><span>+</span></button>

<button class="btncircle btncircle3"><span>+</span></button>

5

0

Devanshu 6 年前

保持线的高度小于高度和宽度,你得到完美的按钮。例:线高:12px;

.btncicle {
border-radius:50%;
width:15px;
height:15px;
padding: 0px;
line-height:12px;

}

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前

关于移动版

代码之家 - 一站式码农服务社区

沪ICP备11025650号