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

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

css html
  •  0
  • D T  · 技术社区  · 7 年前

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

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

    Demo

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

    5 回复  |  直到 7 年前
        1
  •  1
  •   user6875318user6875318    7 年前

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

    线高:50%;

        2
  •  1
  •   Alfin Paul    7 年前

    用这个

    再增加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    7 年前

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

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

        4
  •  0
  •   Toan Lu    7 年前

    您可以添加另一个 <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    7 年前

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

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

    }

    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    9 月前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    9 月前
    magenta placenta  ·  将css变量合并为一个变量
    9 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    9 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    9 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    10 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    10 月前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    10 月前
    Luckkks  ·  过渡色工作不正常
    10 月前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    10 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号