Question

使用unicode作为按钮后，我注意到unicode字符没有正确对齐按钮的中心（水平和垂直）。当我使用padding: 0;

时，我不确定为什么会这样

.btn{
  background-color: #868f98;
  width: 60px;
  height: 60px;
  border-radius: 20%;
  border: none;
  outline: none;
  color: #FFF;
  padding: 0;
  font-size: 2em;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

<button class="btn">&#9776;</button>

Answer 1

在{。{1}}规则上设置line-height到60px会使角色居中。

btn

.btn{
  background-color: #868f98;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 20%;
  border: none;
  outline: none;
  color: #FFF;
  padding: 0;
  font-size: 2em;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Answer 2

显然符号字符不在其行的垂直中心。（但水平居中）所以你只需要尝试填充底部，直到找到正确的值：

.btn{
box-sizing: border-box;
vertical-align: middle;
  background-color: #868f98;
  width: 60px;
  height: 60px;
  border-radius: 20%;
  border: none;
  outline: none;
  color: #FFF;
  padding: 0 0 0.24em 0;
  font-size: 2em;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

<button class="btn">&#9776;</button>

Unicode字符不会与按钮的中心对齐

2 个答案: