Flexbox不会连续显示项目

Question

快速提问。我正在尝试使用flex ...

<div class="cont">
    <div class="1">
        <img src="sm1.png" alt="1" title="1" /> short_texttexttext
    </div>
    <div class="2">
        <img src="sm2.png" alt="2" title="2" /> short_texttexttext
    </div>
</div>

在图像上实现效果...

只是居中，居中但将'合并'图像和文字作为一个项目：

IMG文字

IMG文字

我希望：

  

IMG文字| IMG文本（居中）

唯一的选择是添加额外的div？没门！有什么想法吗？

Answer 1

您可以尝试以下解决方案之一：

  

提示： CSS中不允许以数字开头的类名。因此，您应该重命名类1和2。更多信息请访问：https://stackoverflow.com/a/449000/3840840

解决方案＃1（图片旁边的文字）：

.cont {
  background:yellow;
  padding:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:row;
}
.d1, .d2 {
  background:red;
  margin:10px;
}

<div class="cont">
  <div class="d1">
    <img src="http://placehold.it/100x100" alt="1" title="1" /> short_texttexttext
  </div>
  <div class="d2">
    <img src="http://placehold.it/100x100" alt="2" title="2" /> short_texttexttext
  </div>
</div>

解决方案＃2（图片下的文字）：

.cont {
  background:yellow;
  padding:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:row;
}
.d1, .d2 {
  background:red;
  margin:10px;
  text-align:center;
}

<div class="cont">
  <div class="d1">
    <img src="http://placehold.it/100x100" alt="1" title="1" /><br/>
    short_texttexttext
  </div>
  <div class="d2">
    <img src="http://placehold.it/100x100" alt="2" title="2" /><br/>
    short_texttexttext
  </div>
</div>