如何将一些文本左对齐并保持一些文本居中在同一行上？答案

【问题标题】：How can I align some text left and keep some text centered on the same line?如何将一些文本左对齐并保持一些文本居中在同一行上？
【发布时间】：2016-11-24 04:26:27
【问题描述】：

我有一个带有文本Create Group 的按钮，单击该按钮会变成Cancel 按钮。为了保持视觉一致，两个按钮将具有相同的宽度。两者在左侧都有一个很棒的字体图标，如下所示：

我希望两个按钮的图标左对齐，而文本居中对齐，所以成品应该是这样的：

我尝试将图标向左浮动，但这也产生了垂直向上移动的意外影响。我想我可以添加position: relative 和任意的top: 2px，但这对于应该简单的事情来说似乎很老套。

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

<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>

【问题讨论】：

您可以在图标上使用绝对位置，文本居中对齐文本

标签： css

【解决方案1】：

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

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

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

jsFiddle example

【讨论】：

【解决方案2】：

试试这个。它有效：

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

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

【讨论】：