集中物化 css 图标答案

【问题标题】：Centerize materializecss icon集中物化 css 图标
【发布时间】：2018-05-05 10:55:30
【问题描述】：

我有一个 bin 图标，我想让它出现在容器的中心。我尝试了 text-align center 和 vertical-align:middle。但是，无论我做什么，图标似乎都偏向右侧。

这是一个sn-p

.container{
  border:4px solid blue;
}
i{
  margin-left:50%;
  margin-right:50%;
  text-align:center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

<div class='container'>
  <i class='material-icons large'>delete</i>
</div>

有什么想法可以解决这个问题吗？

【问题讨论】：

标签： html css material-design materialize

【解决方案1】：

问题在于您将margin-left 和margin-right 设置为50%，而没有考虑图标本身的宽度。由于图标为84px 宽，您可以通过将84px 除以2，然后从每个边距中减去该值(42px) 来集中它。

您可以通过使用 CSS 的 calc() 方法动态地执行此操作，如下所示：

.container {
  border: 4px solid blue;
}

i {
  margin-left: calc(50% - (84px / 2));
  margin-right: calc(50% - (84px / 2));
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<div class='container'>
  <i class='material-icons large'>delete</i>
</div>

希望这会有所帮助！ :)

【讨论】：

【解决方案2】：

当您设置margin-left:50%; 时，您没有考虑图标的宽度。所以图标显示从中间开始，然后从那里“增加”它的宽度。

.container{
  border:4px solid blue;
}
i{
  margin-left:50%;
  transform: translateX(-50%);
  text-align:center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

<div class='container'>
  <i class='material-icons large'>delete</i>
</div>

另一种解决方案是将text-align:center; .container css 包围在<i class="material-icons large"> 周围，并从i css 中删除margin 和text-align。

.container{
  border:4px solid blue;
  text-align: center;
}
i{

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

<div class='container'>
  <i class='material-icons large'>delete</i>
</div>

【讨论】：