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>

这就是我希望实现的目标：

有人能给我一些建议吗？
提前谢谢。

最佳答案

我将改进您的标记结构并利用CSS布局选项，例如显示表等。
我的建议是为您所关心/需要的各种CSS布局添加额外的标记层。

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

这样，您就可以以更干净的方式利用所需的布局样式类型。你的标记就是你的骨架。如果你的骨头太少，你的设计将更加有限。

.list{

  width:100%;
  text-align:center;
}
.list-container {
    display: table;
    max-width: 400px;
    margin: 0 auto;
}

.list-item{
  display: table-row;
  width:250px;
}

.list-item-cell {
    display: table-cell;
}

.list-item-cell:first-child {
    padding-right: 10px;
    width: 30px;
}

关于html - 如何将元素与图标相互对齐？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52957165/