时间戳

首页 > 解决方案 > 将第 3 个 div 居中在其他 2 个下方？

css - 将第 3 个 div 居中在其他 2 个下方？

问题描述

试图将一个 div 放在另外 2 个下方，同时保持所有 3 个居中。尝试了不同的浮动和清除，但就是无法得到它。

https://codepen.io/Aandr3w/pen/XWjPYjy 在此处输入图像描述

HTML

<div id="block-left" style="border: 1px solid purple;">
  <ul>
  <li>Cat</li>
  <li>Dog</li>
  <li>Mouse</li>
  <li>Bear</li>
  <li>Eagle</li>
  </ul>
</div>

<div id="block-center">
<div style="border: 1px solid red; float: left;">
  <ul>
  <li>Cat</li>
  <li>Dog</li>
  <li>Mouse</li>
  <li>Bear</li>
  <li>Eagle</li>
  </ul>
</div>
<div style="border: 1px solid blue; float: left;">
  <ul>
  <li>Cat</li>
  <li>Dog</li>
  <li>Mouse</li>
  <li>Bear</li>
  <li>Eagle</li>
  </ul>
  </div>
  <div style="clear:both;">hello world hello world hello world hello world hello world hello world </div>
</div>

<div id="block-right" style="border: 1px solid yellow;">
  <ul>
  <li>Cat</li>
  <li>Dog</li>
  <li>Mouse</li>
  <li>Bear</li>
  <li>Eagle</li>
  </ul>
</div>

CSS

body {
  background-color: #699;
}

#block-left {
    position: fixed;
    top: 50%;
    left: 100px;
    border: 1px solid black;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#block-center {
    position: fixed;
/*  
    display: inline-block;
*/
    top: 50%;
    left: 50%;
    border: 1px solid black;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#block-right {
    position: fixed;
    top: 50%;
    left: 90%;
    border: 1px solid black;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 1em;
}

标签： css

解决方案

您需要在列表周围再添加一个，并且必须使用anddiv来设置样式：display:flexjustify-content:center

div id="block-center">
  <div style="display:flex;justify-content: center;">
<div style="border: 1px solid red;">
  <ul>
  <li>Cat</li>
  <li>Dog</li>
  <li>Mouse</li>
  <li>Bear</li>
  <li>Eagle</li>
  </ul>
</div>
<div style="border: 1px solid blue;">
  <ul>
  <li>Cat</li>
  <li>Dog</li>
  <li>Mouse</li>
  <li>Bear</li>
  <li>Eagle</li>
  </ul>
  </div></div>
  <div style="clear:both;">hello world hello world hello world hello world hello world hello world </div>
</div>

推荐阅读