如何将一些文本对齐并将一些文本保持在同一行的中心？

Question

我有一个文本Create Group的按钮，当点击它时，会变成Cancel按钮。为了保持视觉上的一致性，两个按钮将具有相同的宽度。两者在左侧也有一个字体真棒图标，如下所示：

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

我尝试将图标向左浮动，但这也会产生垂直向上移动的意外影响。我可以添加position: relative和任意top: 2px，但这似乎很简单。

＆＃13;

＆＃13;

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

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button type="button">
  <i class="fa fa-plus"></i> Create Group
</button>

<button type="button">
  <i class="fa fa-remove"></i> Cancel
</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

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

jsFiddle example

Answer 2

试试这个。它有效：

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

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