Question

我有一个bin图标，我想让它出现在容器的中心。我尝试过text-align center和vertical-align：middle。然而，无论我做什么，这个图标似乎都是右侧的一点点。

这是一个片段

.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>

任何想法如何解决这个问题？

Answer 1

问题在于您将margin-left和margin-right设置为50%，而不考虑图标本身的宽度。由于图标的宽度为84px，您可以将84px除以2，然后从每个边距中减去此值（42px），从而将其集中。

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

＆＃13;

.container {
  border: 4px solid blue;
}

i {
  margin-left: calc(50% - (84px / 2));
  margin-right: calc(50% - (84px / 2));
  text-align: center;
}

＆＃13;

<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>

＆＃13;

希望这有帮助！：）

Answer 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的{{1}} css，并从<i class="material-icons large"> css中移除margin和text-align。< / p>

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

中心materializecss图标

2 个答案: