如何将堆叠图标中的元素居中

Question

我有以下代码片段：

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

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

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

• 将“1”置于方框中心
• 将 1 与“This is a sentence”放在同一行
• 使“This is a sentence出现在框旁边而不是重叠在框内。

这看起来与此处的图像相似，只是 1 与“这是一个句子”不在同一行 - 谁知道如何实现这一点？

Answer 1

将 class fa-stack-2x替换为span.fa中的 fa fa-2x

fa-stack-2x class 具有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>