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