Question

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

我使用了vertical-align或line-height，但是按钮的文本仍未对齐中间。

Demo

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

Answer 1

尝试一下：更改line-height属性。

行高：50％;

Answer 2

使用此

再增加1个像素

    library(shiny)

   shinyUI(fluidPage(
   headerPanel(title="pratice"),
   sidebarLayout(
   sidebarPanel(
   selectInput("test",label="Test",multiple = TRUE, 
   choices=list("a","b","c","d")
   )),
   mainPanel(
  textOutput("whatever")
  )
  )
  )
  )

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

Answer 3

请为按钮设置border:none，对齐将被固定。

如果您需要按钮的边框，我们有替代的解决方案。您可以设置box-sizing: content-box;。实际上，它是默认值，但是在这种情况下，不会应用它。因此，您将其添加到CSS中。

Answer 4

您可以在按钮内添加另一个<span>，并在这种情况下使用display: flex。

即使您更改按钮大小，总体上还是一致的。

这里的问题是字符font-size很大。如果您连续减小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>

Answer 5

保持行高小于高度和宽度，您将获得完美的按钮。例如：line-height：12px;

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

}

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

5 个答案: