我正在寻找一种更优雅的方式来将右侧图标与左侧文本垂直对齐，因为负边距可能有点像黑客。
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>
答案 0 :(得分：2)
您可以使用 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>
希望这有帮助！
答案 1 :(得分：1)
一个好方法是在单独的元素中设置图标和文本，然后给它们以下css属性：
.mySelectors{
display: inline-block;
vertical-align: middle;
}
答案 2 :(得分：1)
您仍然可以在需要时使用自定义样式：
使用您的代码：
支持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
答案 3 :(得分：0)
您只需使用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）。
弹性框参考 - complete flexbox reference