如何在中心显示图标和文本

Question

我有一个带有背景图片的 i 标签，然后是 <span>。基本上它是一个图标，后跟文本。我试图将图标居中对齐，然后在图标下方对齐文本。我该怎么做？

我试过垂直对齐，但没用。

<li> 
<i class="icons" ></i>
<span>Icon text</span>
<li />

CSS :

.icons ::before {
content: url(/Style/Image1.svg);
}

Answer 1

如您所见，第一个错误是您编写 .icon 而不是 .icons，第二个错误仅使用双 ::

.icons::before {
content: url("https://placeholder.pics/svg/300");
}

<i class="icons" ></i>
<span>Icon text</span>

Answer 2

将它们打包成 div 样式如下：

<div style="text-align: center;">
    <i class="icons" ></i>
    <div>Icon text</div>
</div>

垂直对齐有效，当你想把它们放在一行中时，但如果我理解你想把文字放在图标下面，所以你应该使用 text-align 而不是 vertical-align

Answer 3

这是一种更简单的方法

.icons {
    display: flex;
    align-items: center;
}

.icons::before {
    content: url(https://static2.clutch.co/s3fs-public/logos/r7q9_xgp.png);
}

<li>
   <span class="icons">Icon Text here</span>
</li>

Answer 4

您可以通过几种方式完成此操作（一旦您修复了语法错误）：

1.使用 flexbox
使用 flex，您只需要使用正确的选项来设置容器元素的样式，使子元素按照我们的意愿行事 - 请参阅评论：

li {
  display: flex;
  align-items: center;     /* center align the elements in the container */
  flex-direction: column;  /* make the child elements appear one under another */
}

.icons:before {  content: url(https://via.placeholder.com/200x100); }

<ul>
  <li><i class="icons"></i><span>Icon text 1</span></li>
  <li><i class="icons"></i><span>Icon text 2</span></li>
</ul>

2。 text-align 的块元素：center

/* center-align the container element */
li { text-align: center; list-style: none; }

/* make i and span  block elements so they appear one below the other */
li i, li.span { display: block; }

.icons:before { content: url(https://via.placeholder.com/200x100); }

<ul>
  <li><i class="icons"></i><span>Icon text 1</span></li>
  <li><i class="icons"></i><span>Icon text 2</span></li>
</ul>

注意 - 您还有一些语法错误：

选择器和 :before（或 ::before - 两者都有效）之间不能有 space
另外 <li /> 也不正确 - 您使用 </li>

li

如何在中心显示图标和文本

How to display icon and text below each other with icon in center

css

alignment

vertical-alignment