Question

我一直在尝试创建一个简单的圆形按钮，当您将鼠标悬停在该按钮上时可以旋转90度。我大部分时间都可以使用它，但是即使我使用的是+，按钮内的align-items: center;似乎也无法正确居中，我认为可以将文本完美地居于元素内垂直。

这是我的代码：

body {
  background: black;
}

button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: 2px solid lime;
  font-size: 1.5em;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  color: lime;
  transition: all .4s ease;
  cursor: pointer;
}

button:hover {
  transform: rotate(90deg);
}

<button>+</button>

从旋转中可以看到，它肯定没有正确居中。任何提示将不胜感激！

编辑：显然其他人没有看到我的问题，所以这里是一个GIF：https://imgur.com/a/K9IXmlN

Answer 1

在fontawesome.com之类的网站上使用加号图标，并使用flex将其居中：

body {
  background: black;
}

button {
 background: transparent;
    border: 2px solid lime;
    font-size: 1.5em;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    color: lime;
    transition: all .4s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

button > .fa-plus{
  font-size:16px;
}

button:hover {
  transform: rotate(90deg);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">


<button>
<i class="fa fa-plus"></i>
</button>

Answer 2

代码对我来说似乎很好，但是我认为我理解您所看到的内容，问题是您用来显示'+'符号的字体在x轴上较大，因此当您旋转查看它看起来像是在垂直移动，但这只是一种幻想，我还不能上传图像，但是自己尝试一下，您也会看到它。

可能使用其他字体可能会有所帮助。

无法在圆形按钮中垂直居中放置文字

2 个答案: