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

Question

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

我有以下代码：

.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的空间（但仍使用填充）。

谢谢！

Answer 1

您快到了！ 我更改了CSS，以使图像和文本显示为inline-block，而不是block。 HTML仅作了少许更改。我将图像css应用于img标签，并通过一个段落标签应用于文本，然后将img和p放入一个div中，并整理了一下CSS（放入{{1 }}转换为简写形式，并将文本和图像通用的css分组在一起）。

具有内部div的替代方法是在外部div css中设置padding，然后从app_image / text css中删除inline块。 （jsfiddle）。这将使图像居中-不清楚是否要使图像左移或居中。如果您想将其向左移动，可以随时调整css，以将图像显示在左侧。

希望这会有所帮助

flex-direction

.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;
}