在不使用负边距的情况下将图标与文本对齐

Question

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

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>

Answer 1

一个好的方法是在单独的元素中设置图标和文本，然后给它们以下 css 属性:

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

Answer 2

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

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>

Answer 3

您只需使用 flexbox 即可。

将 display: flex 应用到 parent，在您的情况下是 div.main
并将 margin-left: auto 应用到 child ，您希望将其与 window.

类似下面的内容。

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

弹性框参考 - complete flexbox reference

Answer 4

您可以使用 CSS Flexbox。并使用 flex 的 align 属性。看看下面的片段：

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>

希望对您有所帮助！

Answer 5

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

使用您的代码：

使用 Flexbox

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

使用 Table 样式

支持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 or this guide on flexbox without flexbox。

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

在不使用负边距的情况下将图标与文本对齐

Align icons with text without using a negative margin

html

css

vertical-alignment

flexbox

使用 Flexbox

使用 Table 样式