时间戳

首页 > 解决方案 > 如何将 div 的内容围绕特定元素居中？

html - 如何将 div 的内容围绕特定元素居中？

问题描述

我正在使用html和css。问题的链接https://codepen.io/rybohi/pen/vYLpNzK

我有

<div class="container">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="yellow"></div>
</div>

目前我可以使用css将项目居中justify-content:center; 但是我想要的是在中心放置“绿色” div，然后让蓝色 div 和黄色 div 围绕它，红色 div 在蓝色 div 旁边。

我试过 justify-self-center 但没有占上风，当我将绿色 div 相对放置并离开 50vw 时，其他 div 都没有居中，绿色 div 也不是 smack bang center。

例子：

您可以看到蓝色和绿色相交的部分是页面的中心。我怎样才能让绿色的中间是页面的中心？ 在此处输入图像描述

标签： htmlcss

解决方案

您可以margin-left: -100px使用 of 类设置元素.red并使您的span元素成为 flex 容器。

请参阅下面的演示：

div{
  width:100px; height:100px;
}

span {
  display: flex;
}

.container{
  width:100%;
  display:flex;
  justify-content:center;
}

.red{
  background-color:red;
  margin-left: -100px;
}
.blue{
  background-color:blue;
  
}
.green{
  background-color:green;
}
.yellow{
  background-color:yellow;
}
<div class="container">
  <span>
     <div class="red"></div>
      <div class="blue"></div>
  </span>
  <span>
    <div class="green"></div>
  </span>
  <span>
    <div class="yellow"></div>
    </span>
</div>

推荐阅读