如何使用類來動態地將子母欄居中？ -有解無憂

如何通過使用 "center "類來動態地將子檔案夾居中。我找不到任何參考資料，也不知道我應該怎么搜索。

有人知道如何用css或tailwind方式來做嗎？

下面是圖片中的輸出示例。(在下面的代碼段中，黑色被置于中心位置）

.parent {
  height: 500px;
  width: 300px;
  border: 1px solid black;
  overflow-y: hidden;
}

.child {
  height: 100px;
}

.orange { background: orange; }
.yellow { background: yellow; }
.black { background: black; }
.green { background: green; }
.grey { background: gray; }
.violet { background: violet; }

<div class="parent">/span>
  <div class="child orange"/span>> </div>>
  <div class="child yellow"/span>> </div>>
  <div class="child black"/span>> </div>>
  <div class="child green center"/span>> </div>>
  <div class="child gray"/span>> </div>>
  <div class="child violet"/span>> </div>>
</div>/span>

這里是我的也

找到差異后，你可以抵消所有的子元素。為了選擇所有的子元素，我使用了一個容器 div 作為所有子 div 的封裝器。 <串列

將position: relative;添加到父節點，這樣子節點就可以計算出相對于父節點的偏移值。

<! DOCTYPE html> 
<html lang="en"> 
  <head>/span>
    <meta charset="UTF-8" />
    <title>Document</title> 
    <style>
      #parent {
        height: 500px;
        width: 300px;
        border: 1px solid black;
        overflow-y: hidden;
        position: relative;
      }

      .child {
        height: 100px;
      }

      .orange {background: orange;> }
      .yellow {background: 黃色; }
      .black {background: black;}。
      .green {background: 綠色; }
      .gray {background: gray;}。

    </style>
  </head> 
  <body> 
    <div id="parent"> 
      <div id="容器">
        <div class="child orange"/span>> </div>>
        <div class="child yellow"/span>> </div>>
        <div class="child black"/span>> </div>>
        <div class="child green center"/span>> </div>>
        <div class="child gray"/span>> </div>>
      </div>/span>
    </div>/span>

    <script>
      //選擇父，子容器和子div
      let parent = document.querySelector("#parent") 。
      let child = document.querySelector(".child") 。
      let childContainer = document.querySelector("#container") 。

      //步驟1：找到塊在父神中的中間位置。
      let parentHeight = parent.clientHeight;
      let childHeight = child.clientHeight;

      let totalBlocks = Math.floor（parentHeight / childHeight）; / 5
      let middleBlock = Math.floor(totalBlocks / 2); / 2
      let middlePosition = middleBlock * childHeight; / 200px.

      //步驟2：找到需要在中間的div的位置。
      let centerDivPosition = document. querySelector(".center").offsetTop; // 300px

      // Step 3: 找到它們之間的差異。
      let offestValue = middlePosition - centerDivPosition; /- 100

      // Step 4: 偏移容器位置
      childContainer.style.position = "relative"/span>;
      childContainer.style.top = `${offestValue}px`;
    </script>>
  </body> 
</html>

uj5u.com熱心網友回復：

你可以通過使用NativeJS/jQuery簡單地實作這一點。請看下面的片段。

如果你需要進一步的幫助來解決這個問題，請告訴我。

你需要以編程方式向childs提供order值。

顯示代碼片斷

$(document)。 ready(function() {
  var items = $(' .parent .child');
  var otherItems = $('.father .child:not(.center)');
  var centerOrder = parseInt(items.length/ 2)   1;
  $('.center').css('order', centerOrder) 。
  otherItems.each(function(index, item) {
    if(index < otherItems.length/2)
      $(item).css('order', centerOrder - 1) 。
    else[/span]. 
      $(item).css('order', centerOrder   1) 。
  })
})

.father {
  height: 500px;
  width: 300px;
  border: 1px solid black;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

.child {
  height: 50px;
}

.orange { background: orange; }
.yellow { background: yellow; }
.black { background: black; }
.green { background: green; }
.grey { background: gray; }
.violet { background: violet; }

<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<div class="father">
  <div class="child orange"/span>> </div>>
  <div class="child yellow"/span>> </div>>
  <div class="child green"/span>> </div>>
  <div class="child gray"/span>> </div>>
  <div class="child violet center"/span>> </div>>
</div>/span>

uj5u.com熱心網友回復：

既然你提到了tailwindcss。你可以使用tailwind的順序https://tailwindcss.com/docs/order來改變子div的順序。

在下面的這些例子中，你可以將綠色的子句發送到第一個。也可以用flex flex-col來包裝它。

。

span class="hljs-selector-class">.parent {
  height: 500px;
  width: 300px;
  border: 1px solid black;
  overflow-y: hidden;
}

.child {
  height: 100px;
}

.orange { background: orange; }
.yellow { background: yellow; }
.black { background: black; }
.green { background: green; }
.grey { background: gray; }
.violet { background: violet; }

< link rel="styleheet" href="https: //cdnjs. cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css"> 

<div class="father">
  <div class="flex flex-col"/span>>
    <div class="child orange"> </div>>
    <div class="child yellow"/span>> </div>>
    <div class="child black"/span>> </div>>
    <div class="child green order-first"/span>> </div>>
    <div class="child gray"/span>> </div>>
    <div class="child violet"/span>> </div>>
  </div>/span>
</div>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/333976.html

標籤：

上一篇：選擇一個類中的第一個div和最后一個div

下一篇：如何在css中斷字