Как расположить текст после иконки в 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 может быть установка flex-direction во внешнем div css и удаление встроенного блока из app_image / text css.( 1010 * 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>