Css 如何将某些文本左对齐，并使某些文本居中于同一行？

我有一个按钮，上面有文本

Create Group

，点击后会变成

Cancel

按钮。为了在视觉上保持一致，两个按钮的宽度相同。这两种字体的左侧都有一个很棒的图标，如下所示：

我希望两个按钮的图标左对齐，而文本居中对齐，因此成品应如下所示：

我尝试将图标向左浮动，但也产生了垂直向上移动的意外效果。我可以添加

position:relative

和一个任意的

top:2px

，我想，但对于应该简单的东西来说，这似乎很难做到

按钮{
宽度：110px；
显示：块；
边缘底部：10px；
}

创建组
取消

您可以使用定位来执行此操作：

button {
  width: 110px;
  display: block;
  margin-bottom: 10px;
  position:relative;
}

i {
  position: absolute;
  left: 1px;
  top: 2px;
}

试试这个。它的工作原理是：

button{
width: 110px;
display: block;
margin-bottom: 10px;
}

i{
  float: left;
  margin: 2px;
}

---

您可以使用图标上的绝对位置和文本对齐文本中心