如何在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进行了一些整理(将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>

​