将ul标签设置在页面中央，并将图像放置在不同的位置

Question

*我要显示两个大区域，一个在页面的左侧，另一个在页面的右侧，两个都必须占显示的50％。同时，我想在页面中心（水平和垂直）以及两个大区域上显示ul标签。（我可以在其中一个区域放置图片，在另一个区域放置描述...）我还要在垂直上方和水平中央放置一个文本。我尝试这样做，但是我认为最好不要在这里放我的代码，因为这确实很糟糕。有人可以帮我吗？我能更好地解释一下我们可以使用的仓位类型之间的区别吗？ *

Answer 1

您想使用z-index，然后开始使用绝对位置会更好。z-index允许您将标签相互放置，您可以查看更多here。使用z-index，您可以将页面的2个主要部分放在按钮上，然后可以将其放在列表上。

下面创建了一个基本页面作为示例，我使用flex调整位置以匹配您所描述的内容。

<div style="display:flex; flex-direction: row; justify-content: space-between">
  <img src="" alt="none" />
  <p>Description</p>
</div>
<div style="z-index:10; display: flex; justify-content: center">
  <ul>
    <p>a</p>
    <p>b</p>
    <p>c</p>
  </ul>
</div>