Question

我有一个元素，我有一个FontAwesome图标和一些文本，我的问题是，是否有可能在一个容器内水平对齐多个元素，无论内部是什么类型的元素（文本，图标，其他）。在我的示例中，文本是对齐的底部，图标是中间对齐的，我如何中间对齐文本...

这是一个小例子： http://jsbin.com/yureyi/edit?html,css,output

Answer 1

在FontAwesome图标上设置vertical-align，如下所示：

i{font-size: 2em; vertical-align: middle;}

演示：http://jsbin.com/lohozekiru/1/edit?html,css,output

Answer 2

您可以使用<center>标记，其中ususaly会覆盖＆＃34;水平中间＆＃34;的所有默认对齐。

对于真实（垂直）中间，使用div和margin。如果您将文本边距从底部设置为（img height - 文本高度）/ 2，则它将显示在图像的中间。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<!-- Start your code here -->
<a href="#" id="linkfc" class="list-group-item">
            <i class="glyphicon glyphicon-check" style="float: left; margin-right: 10px;"></i>
  <div style="margin: 5px; font-size: 5px;">Dealer Code</div></a>
  </body>
</html>

请注意，如果我将此代码显示为FireFox中的单独页面，则会正确显示。由于某些原因，您的样本上面的图像显得更大。

Answer 3

您还可以使用css translate垂直对齐元素。

例如，将您的“经销商文本”包装在段落标记中并尝试以下操作：

body{padding: 50px}

i{font-size: 2em;}

a p {font-size:18px;  
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-left: 40px;
}

如果知道父元素的高度，设置line-height属性也可以。这个codepen有一些很棒的教程： Vertical alignment

Answer 4

Roger Johansson写了一篇关于这件事的整篇文章，选择最适合你的文章：

http://www.456bereastreet.com/archive/201303/how_to_shrinkwrap_and_center_elements_horizontally/

另外，我写了一个替代方法，使用fit-content大小调整，这是一个W3C工作草案：

http://red-team-design.com/horizontal-centering-using-css-fit-content-value/

希望有所帮助！

Answer 5

根据您的示例，要使文本和图标垂直对齐，请按以下方式尝试代码：

.icon, .text {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: middle;
}

在同一容器中的许多元素的水平对齐

5 个答案: