UL图像的特定布局

Question

如何使用图像编码ul列表以便看起来如下图所示？

我想我必须做这样的事情？ （这不是正确的代码）

<ul>
<li><ul><li>IMAGE1</li><li>IMAGE2</li></ul></li>
<li>IMAGE3</li>
</ul>

Answer 1

Use flex

<ul style="list-style-type: none; flex-direction: row; display: flex; justify-content; center; align-items: center;">
  <li>
    <ul style="list-style-type: none; flex-direction: column; display: flex; justify-content; center; align-items: center;">
     <li>IMAGE1</li>
     <li>IMAGE2</li>
    </ul>
  </li>
  <li>IMAGE3</li>
</ul>