如何在堆叠图标内居中元素答案

【问题标题】：how to center element inside stacked icon如何在堆叠图标内居中元素
【发布时间】：2021-04-07 14:25:40
【问题描述】：

我有以下sn-p的代码：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<ul>
  <li>
    <span class="fa-stack" style="width: auto;">
      <!-- The icon that will wrap the number -->
      <span class="fa fa-square-o fa-stack-2x"></span>
      <!-- a strong element with the custom content, in this case a number -->
      <strong class="fa-stack-1x">1</strong>
    </span>
  This is a sentence.
  </li>
</ul>

</body>
</html>

这是来自一个更大的项目（简化了代码），我需要在父跨度类上有style="width:auto"。

在不删除style="width:auto" 的情况下，我试图实现三件事：

将框中的“1”居中
将 1 与“这是一个句子”放在同一行
使“这是一个句子”出现在方框旁边，而不是在方框内重叠。

这看起来类似于图像here，除了 1 与“这是一个句子”不在同一行 - 有人知道如何实现吗？

【问题讨论】：

标签： html css icons font-awesome

【解决方案1】：

在span.fa 中用fa-2x 替换类fa-stack-2x

fa-stack-2x 类有 position:absolute 以便文本覆盖它

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<ul>
  <li>
    <span class="fa-stack" style="width: auto;">
      <!-- The icon that will wrap the number -->
      <span class="fa fa-square-o fa-2x"></span>
      <!-- a strong element with the custom content, in this case a number -->
      <strong class="fa-stack-1x">1</strong>
    </span>
  This is a sentence.
  </li>
</ul>

或者你可以在不使用 font-awesome 的情况下做到这一点

.square {
  display: inline-block;
  border: 2px solid #000;
  border-radius: 5px;
  text-align: center;
  width: 20px;
  height: 20px;
  font-weight: bold;
  line-height: 20px;
}

<ul>
  <li>        
      <span class="square">1</span>
      This is a sentence.
  </li>
</ul>

【讨论】：

1 在盒子外面？
我希望将 1 放在框的中间，并与其他文本在同一行。
在 sn-p 中看起来不错
sn-p 为我在框外显示“1”，是在框内为您显示吗？