css 应用基于div中心的对齐内容

eufgjt7s 于 2023-03-20 发布在其他

关注(0)|答案(3)|浏览(154)

如何根据div的中心应用justify-content: space-between？例如，假设我有三个不同大小的div，我想让它们对齐，使第二个div的中心位于容器的中心

.flex {
  display: flex;
  width: 1000px;
  height: 200px;
  background-color: black;
  justify-content: space-between;
  position: relative;
}

.first {
  width: 150px;
  background-color: red;
}

.second {
  width: 200px;
  background-color: green;
}

.third {
  width: 100px;
  background-color: blue;
}

.center {
  width: 10px;
  height: 10px;
  background-color: white;
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
}

<div class="flex">
  <div class="center"></div>
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>

正如你所看到的，它不是居中的。或者在有四个div的情况下，我希望容器div的中心在第二个和第三个div的中间。有内置的方法来实现这个行为吗？提前感谢

css

来源：https://stackoverflow.com/questions/75758547/apply-justify-content-based-on-center-of-divs

3条答案

按热度按时间

dxpyg8gm1#

利用

.flex {
  display: flex;
  width: 100%;
  height: 200px;
  background-color: black;
  justify-content: space-between;
  position: relative;
}

你不需要<div class="center"></div>

赞(0）回复(0）举报 2023-03-20

vaqhlq812#

如果您需要支持任意数量的元素，我想不出任何方法来实现这一点，只使用具有不同大小元素作为直接子元素的flexbox。我的建议是使用具有额外子元素层的flexbox。或者您可以使用表，但我认为flexbox更简洁。

.wrapper{
  display: flex;
  height: 100px;
  width: 500px;
  position: relative;
  
}

.center{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0px;
  border: 2px solid black;
  transform: translateX(-50%);
  
}

.item{
  flex: 1;
  border: 1px solid black;
}

.narrowContent{
  width: 50%;
  height: 100%;
  background-color: red;
  margin: 0px auto;
}

.content{
  width: 100%;
  height: 100%;
  background-color: green;
}

.mytable{
  display: table;
  height: 100px;
  width: 500px;
  position: relative;
}

.myrow{
  display: table-row;
}

.mycell{
  display: table-cell;
  border: 1px solid black;
  height: 100%;
}

Flex:
<div class="wrapper">
  <div class="center">

  </div>
  <div class="item">
    <div class="narrowContent">

    </div>
  </div>
  <div class="item">
    <div class="content">

    </div>
  </div>
  <div class="item">
    <div class="content">

    </div>
  </div>
  <div class="item">
    <div class="narrowContent">

    </div>
  </div>
  <div class="item">
    <div class="content">

    </div>
  </div>
</div>

Table:
<div class="mytable">
  <div class="center">

  </div>
  <div class="myrow">
    <div class="mycell">
      <div class="narrowContent">

      </div>
    </div>
    <div class="mycell">
      <div class="narrowContent">

      </div>
    </div>
    <div class="mycell">
      <div class="content">

      </div>
    </div>
    <div class="mycell">
      <div class="content">

      </div>
    </div>
    <div class="mycell">
      <div class="narrowContent">

      </div>
    </div>
    <div class="mycell">
      <div class="content">

      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-03-20

rqmkfv5c3#

我可以用这种方法，我们可以得到子元素的个数，找到中间的元素，然后在里面创建你的中心DIV

<div>
   <div></div>
   <div> <div class="center"> </div></div> <----Added new center div element inside here
   <div></div>
</div>

或
如果没有一个中间元素，我们可以在两个中间元素之间添加中心DIV

<div>
   <div></div>
   <div></div> <--------------Added new center div element here
   <div></div>
</div>

一个一个二个一个一个一个三个一个一个一个一个一个四个一个
Add any number of DIV element and see

赞(0）回复(0）举报 2023-03-20

我来回答

css 应用基于div中心的对齐内容

3条答案

相关问题

热门标签

最新问答