Question

哪种方法更适合将图标（真棒字体）居中放置在图标中？很明显，有很多方法，StackOverflow上还提到了其他一些方法。其他方法的问题要求样式化2-3个不同的元素才能获得相同的效果。我的问题是，为相同的效果仅设置样式1元素会更好还是更好？此外，如果仅样式化一个元素，则应该样式化父级或子级吗？最好在上面列出的使用垂直对齐的示例stackoverflow上使用诸如flexbox之类的东西。我有一个偏好，但是我没有，这是最常见或最佳的做法。

以前提到的方法： 这种方法的问题在于，与在单个元素上的所有样式相比，在不同元素上需要更多的CSS。替代Stackoverflow答案/方法：How to center text vertically with a large font-awesome icon?

选项1 使用flexbox强制其居中，并且如果父容器的大小发生变化，事物将自动居中。

选项2 仅设置文本样式。这种方法直接在元素上设置样式，而不是保留父元素。

HTML

<div class="icon">
  <i class="fa  fa-arrow-down" aria-hidden="true"></i>
</div>

CSS （2个选项）

.icon {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 30px;
    width: 30px;
    padding: 10px;
    color: white;
    background-color: green;
    border-radius: 50%;
    box-sizing: border-box;
}
.icon .fa {
    height: 30px;
    width: 30px;
    color: white;
    text-align: center;
    line-height: 1.9;
    background-color: blue;
    border-radius: 50%;
}

工作示例 https://codepen.io/idonahue/pen/ReerYJ

注意：我可以选择其中任何一种，但我想知道社区认为什么是最佳实践，以及为什么或是否知道更好的方法。谢谢！

编辑：该答案（How to center text vertically with a large font-awesome icon?已有5年以上的历史，已经过时，并且与我问的“这两个选项中的哪一个更好”这个问题无关。更重要的是，自从回答了上一个问题以来，CSS已经出现了5年。 CSS现在具有flexbox，grid等。此外，网页/应用程序需要可伸缩，并且CSS应该可重用，而其他答案中提供的示例不可伸缩，这不是重复的问题。

在CSS中将图标的文本居中的最佳方法是哪种？ Flexbox还是垂直对齐？其他答案仅解决垂直对齐

0 个答案: