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

Question

我有一些 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>

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

有人可以就此提出建议吗？

提前致谢。

Answer 1

我会改进您的标记结构并利用 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;
}