Question

我想水平和垂直居中放置一个链接中的图标：之前。

尽管我尝试了很多次，但我不明白为什么图标不想居中。

这是我的HTML：

<ul>
  <li class="item-1"><a href="">Search</a></li>
</ul>

我的css：

ul > li > a {
  font-size:0;
  border-radius: 50px;
  text-align: center;
  height: 50px;
  width: 50px;
  border: 2px solid #ccc;
}

ul > li > a:before {
  font-family:"Glyphicons Halflings";
  font-size: 40px;
  line-height: 50px;
}

ul > li.item-1 > a:before {
  content:"\2b";
}

小提琴：https://jsfiddle.net/xmx4xcfc/

有关信息，我使用bootstrap。

我没看到什么？

（对于Center a Pseudo Element的副本我不想使用position：absolute，如果可能的话，更倾向于使用更“轻”的解决方案......）

Answer 1

您可以使用vertical-align: middle垂直对齐它。

Answer 2

text-align: center;应该应用于父元素（li）而不是锚标记。

另外，我建议将主播更改为display: inline-block;

ul > li > a {
  font-size:0;
  border-radius: 50px;
  height: 50px;
  width: 50px;
  border: 2px solid #ccc;
  display: inline-block;
}

ul > li > a:before {
  font-family:"Glyphicons Halflings";
  font-size: 40px;
  line-height: 50px;
}

ul > li.item-1 > a:before {
  content:"\2b";
}

ul > li {
  text-align: center;
}

在那里居中一个图标：之前

2 个答案: