时间戳

首页 > 解决方案 > 如何将元素与彼此下方的图标对齐？

html - 如何将元素与彼此下方的图标对齐？

问题描述

我有一些 div 在我的页面上充当列表/按钮。

每个 div 包含一个图标和一个文本。

我需要将这些“按钮”保留在页面的中心，但同时，我必须将图标和文本对齐。

所以所有的图标都在彼此之下，所有的文字都在彼此之下。

这是我到目前为止所拥有的：

代码 https://jsfiddle.net/sy21m4dq/

.list{
  
  width:100%;
  text-align:center;
}

.list-item{
  display:inline-block;
  width:250px;
  
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="list">

<div class="list-item">

<i class="fa fa-user" aria-hidden="true"></i> Account

</div>

<div class="list-item">

<i class="fa fa-sign-in" aria-hidden="true"></i> Account LOGIN

</div>


<div class="list-item">

<i class="fa fa-star" aria-hidden="true"></i> freedback

</div>

<div class="list-item">

<i class="fa fa-question" aria-hidden="true"></i> Help

</div>


</div>

这就是我想要实现的目标：

在此处输入图像描述

有人可以请教吗？

提前致谢。

标签： htmlcss

解决方案

我将解释一些事情，但下面的代码片段有效。

  1. 你有divs id="list-item"，这是一个错字。他们需要class="list-item"。
  2. 你有.list-itemas inline-block，但实际上它们应该是block，并且容器（.listdiv）应该设置为 250px 宽度。
  3. 使图标/文本真正对齐的锦上添花是为图标应用一些宽度（.list-item .fa）。

body{
  text-align: center;
}

.list {
  display: inline-block;
  width: 150px;
}

.list-item {
  display: block;
  width: auto;
  text-align: left;
}

.list-item .fa  {
  width: 30px;
  text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="list">
  <div class="list-item">
    <i class="fa fa-user" aria-hidden="true"></i> Account
  </div>

  <div class="list-item">
    <i class="fa fa-sign-in" aria-hidden="true"></i> Account LOGIN
  </div>
  <div class="list-item">
    <i class="fa fa-star" aria-hidden="true"></i> freedback
  </div>
  <div class="list-item">
    <i class="fa fa-question" aria-hidden="true"></i> Help
  </div>
</div>

推荐阅读