如何在 CSS 中的图标后放置文本？答案

【问题标题】：How to position text after icon in CSS?如何在 CSS 中的图标后放置文本？
【发布时间】：2018-12-16 22:59:07
【问题描述】：

我试图在图标之后放置文本，但由于某种原因，文本粘在图标上，而不是在图标下方。

我有以下代码：

.appbox {
  position: relative;
  display: flex;
  /* align-items:center; */
  background-color: rgba(215, 215, 215, 0.6);
  width: 110px;
  height: 110px;
  border-radius: 8px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
  margin-right: 20px;
  margin-bottom: 20px;
  float: left;
  text-align: left;
  text-decoration: none!important;
  color: #555555;
  !important
}

.appbox_image {
  display: block;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 72px;
  font-size: 12px;
  line-height: 15px;
  text-align: left!important;
  float: none!important;
  clear: both!important;
}

.appbox_text {
  display: block;
  font-size: 12px;
  line-height: 15px;
  text-align: left!important;
  float: none!important;
  clear: both!important;
}

<div class="appbox">
  <div class="appbox_image">
    <img src='../images/app-newtext.png'></div>
  <div class="appbox_text">Create a new context and visualise the text inside.</div>
</div>

但是，结果我得到了这个：

要进行哪些更改以使文本显示在图像下方，并且与图像的宽度不同，但更宽一些，适合appbox 的空间（但仍应用填充）。

谢谢！

【问题讨论】：

你可以尝试删除 .appbox diplay flex

标签： css icons

【解决方案1】：

你快到了！我更改了您的 css，以便图像和文本显示 inline-block 而不是 block。 HTML 仅稍作改动。我将图像 css 应用于 img 标签和通过段落标签的文本，我将 img 和 p 放入一个 div 并稍微整理了您的 css（将 padding 放入速记，并且将文本和图像共有的 CSS 组合在一起）。

拥有内部 div 的替代方法是在外部 div css 中设置 flex-direction，并从 app_image/text css 中删除 inline-block。 (jsfiddle)。这将使图像居中 - 不清楚您是想要图像居中还是居中。如果你想要它在左边，你可以随时调整 css 以将图像显示在左边。

希望对你有帮助

.appbox {
  position: relative;
  display: flex;
  /*flex-direction:column;*/
  float: left;
  /* align-items:center; */
  background-color: rgba(215, 215, 215, 0.6);
  width: 110px;
  height: 110px;
  border-radius: 8px;
  padding: 15px 15px 15px 15px;
  /* top, right, bottom, left*/
  margin-right: 20px;
  margin-bottom: 20px;
  text-align: left;
  text-decoration: none!important;
  color: #555555!important;
}

.appbox_image {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 72px;
  font-size: 12px;
}

.appbox_image,
.appbox_text {
  display: inline-block;
  font-size: 12px;
  line-height: 15px;
  text-align: left;
  float: none!important;
  clear: both!important;
}

<div class="appbox">
  <div>
    <img class="appbox_image" src='../images/app-newtext.png'>
    <p class="appbox_text">Create a new context and visualise the text inside. </p>
  </div>
</div>

【讨论】：