Question

我的页面上有一些div用作列表/按钮。

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

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

所以所有图标都在彼此下方，所有文本都在彼此下方。

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

.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

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

您在div和id="list-item"之间输入了错字。他们必须是class="list-item"。
您将.list-item设置为inline-block，但实际上它们应该是block，容器（.list div）应该是设置为250px宽度。
为使图标/文字真正对齐，在蛋糕上加了一点糖霜，就是对图标（.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>

Answer 2

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

Answer 3

为图标添加固定宽度

i { width: 20px; text-align: center; }

使列表成为具有columns-display的内联柔性容器
使用text-align-center或flex将整个框居中

https://jsfiddle.net/qw2f3ojt/

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

3 个答案: