【问题标题】：Align icons with text without using a negative margin在不使用负边距的情况下将图标与文本对齐
【发布时间】：2017-04-16 06:23:44
【问题描述】：

我正在寻找一种更优雅的方式来将右侧图标与左侧文本垂直对齐，因为负边距可能有点小技巧。

div.main {
  border: 1px solid black;
  padding: 14px;
}

div.icons {
  margin-top: -1.65em;
}

div.icon {
  font-size: 2rem;
  color: blue;
  border: 0.1px solid blue;
  border-radius: 3px;
  margin-left: -1px;
  padding: 3px;
  float: right;
}

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>


<div class="main">
  <div class="summary">Some text</div>
  <div class="icons pull-right">
    <div class="icon fa fa-line-chart">
    </div>
    <div class="icon fa fa-bar-chart">
    </div>
  </div>
</div>

【问题讨论】：

最好将display inline-block 与vertical-align: middle 一起使用。你避免做一些不好的事情，比如设置负边距。
@Mardzis 我要补充一点，任何“幻数”都是脆弱的，因为如果你只需要重构一小部分，你总是必须重新设置它们，你最终会做的工作太多

标签： html css flexbox vertical-alignment

【解决方案1】：

一个好方法是将图标和文本都设置在单独的元素中，然后为它们提供以下 css 属性：

.mySelectors{
   display: inline-block;
   vertical-align: middle;
}

【讨论】：

【解决方案2】：

如果flexbox 是一个选项，只需为main 和icons 添加display: flex 用于水平定位：

div.icons {
  margin-left:auto;
}

和align-items: center 用于垂直对齐。

请看下面的演示：

div.main {
  border: 1px solid black;
  padding: 14px;
  display: flex;
  align-items: center;
}

div.icons {
  margin-left:auto;
}

div.icon {
  font-size: 2rem;
  color: blue;
  border: 0.1px solid blue;
  border-radius: 3px;
  margin-left: -1px;
  padding: 3px; 
}

<!DOCTYPE html>
<html>
<head>  
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>  
</head>

<body>
  
  <div class="main">
  <div class="summary">Some text</div>
  <div class="icons pull-right">
    <div class="icon fa fa-line-chart">
    </div>
    <div class="icon fa fa-bar-chart">
    </div>
  </div>
</div>
  
</body>
</html>

【讨论】：

文本似乎不在父 div 的中间。

【解决方案3】：

您可以简单地使用flexbox 来执行此操作。

将display: flex 应用于父级，在您的情况下为div.main
并将margin-left: auto 应用于要对齐窗口右侧的子项。

如下所示。

div.main {
  border: 1px solid black;
  padding: 14px;
  display: flex;
}

div.icons {
  margin-left: auto;
  /*margin-top: -1.65em;*/
}

div.icon {
  font-size: 2rem;
  color: blue;
  border: 0.1px solid blue;
  border-radius: 3px;
  margin-left: -1px;
  padding: 3px; 
  float: right;
}

<!DOCTYPE html>
<html>
  <head>  
    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>  
  </head>

  <body>

    <div class="main">
      <div class="summary">Some text</div>
      <div class="icons pull-right">
        <div class="icon fa fa-line-chart">
        </div>
        <div class="icon fa fa-bar-chart">
        </div>
      </div>
    </div>

  </body>
</html>

希望这对您有所帮助（y）。

Flex 框参考 - complete flexbox reference

【讨论】：

【解决方案4】：

您可以使用 CSS Flexbox。并使用 flex 的 align 属性。看看下面的sn-p：

div.main {
  border: 1px solid black;
  padding: 14px;
  display: flex;
  align-items: center;
}

div.summary {
  flex: 1;
}

div.icon {
  font-size: 2rem;
  color: blue;
  border: 0.1px solid blue;
  border-radius: 3px;
  margin-left: -1px;
  padding: 3px; 
  float: right;
}

<html>
<head>  
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>  
</head>

<body>
  
  <div class="main">
  <div class="summary">Some text</div>
  <div class="icons">
    <div class="icon fa fa-line-chart">
    </div>
    <div class="icon fa fa-bar-chart">
    </div>
  </div>
</div>
  
</body>
</html>

希望这会有所帮助！

【讨论】：

【解决方案5】：

您仍然可以在需要时使用自定义样式：

使用您的代码：

使用弹性盒

支持ie10+

div.main {
  border: 1px solid black;
  padding: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

}

div.icon {
  font-size: 2rem;
  color: blue;
  border: 0.1px solid blue;
  border-radius: 3px;
  margin-left: -1px;
  padding: 3px; 
  float: right;
}

<!DOCTYPE html>
<html>
<head>  
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>  
</head>

<body>
  
  <div class="main">
  <div class="summary">Some text</div>
  <div class="icons">
    <div class="icon fa fa-line-chart">
    </div>
    <div class="icon fa fa-bar-chart">
    </div>
  </div>
</div>
  
</body>
</html>

使用表格样式

支持ie8+

div.main {
  border: 1px solid black;
  padding: 14px;

  display: table;
  width: 100%;

}

div.summary {
  display: table-cell;
  vertical-align: middle;
}

div.icon {
  font-size: 2rem;
  color: blue;
  border: 0.1px solid blue;
  border-radius: 3px;
  margin-left: -1px;
  padding: 3px;
  float: right;
}

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>  
<div class="main">
  <div class="summary">Some text</div>
  <div class="icons">
    <div class="icon fa fa-line-chart">
    </div>
    <div class="icon fa fa-bar-chart">
    </div>
  </div>
</div>

看看this flexbox guide 或this guide on flexbox without flexbox。

还可以考虑使用不依赖于标签的更明确的类名，即查看BEM

【讨论】：

谢谢！我更喜欢你的解决方案 justify-content: space-between 因为这也让我可以从图标中删除 float: （我只需要再次在 html 中反转它们）