如何将图标和文本彼此下方显示在中间的图标中

问题描述

我有一个带有背景图片的标签，然后跟随<li> Icon text <li />。基本上是一个图标，后跟文本。我试图将图标居中对齐，然后在图标下方对齐文本。我该怎么办？

我尝试了垂直对齐，但是没有用。

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

CSS：

.MakerDataForm {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
  grid-gap: 24px 40px;
}

解决方法

您可以看到，第一个错误是您写.icon而不是.icons，第二个错误是使用双::

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

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

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

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

垂直对齐有效，当您想将它们居中放置在一行中时，但是如果我很了解，您希望将文本放在图标下，那么您应该使用text-align而不是vertical-align

这是一种更简单的方法

---
stages:
- build
- notify

build:
  stage: build
  script:
  - build something

success-notify:
  stage: notify
  script:
  - bash notify.sh --result success

failed-notify:
  stage: notify
  script:
  - bash notify.sh --result failed
  when: on_failure

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

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

您可以通过几种方法（一旦纠正了语法错误）就可以这样做：

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。阻止文本对齐的元素：居中

/* 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-都可以）之间不能有空格
还有<li />是不正确的-您使用li关闭</li>元素

alignment vertical-alignment