如何將中的專案與React應用程式中的CSS對齊？-有解無憂

頁面的設計幾乎是這樣的：如何將中的專案與 React 應用程式中的 CSS 對齊？

我想要做的是將Redbox（其中有1）放在“PlayerOneDiv”的中間

與"PlayerTwoDiv"的黃色框相同。

return (<div className="App">
        <div className="sampleDiv" onClick={getData}>
            <div className="playerOneScoreDiv">1</div>
            <div className="midDiv">
                <Box param={pitValue1} funcParam={getData}> b</Box>
            </div>
            <div className="playerTwoScoreDiv">3</div>
        </div>

PlayerOneDiv 和外部 div 的樣式為：

  .sampleDiv {
    background-color: green;
    margin: auto;
    width: 60%;
    padding: 100px;
    border-radius: 14px;
    display: flex;
    flex-direction: row;
}

.playerOneScoreDiv {
    width: 15%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: bold;
    border-radius: 14px;
    color: #fff;
    margin-right: 4px;
    margin-bottom: 4px;
    cursor: default;
    background-color: red;
}

當我玩PlayerOneDiv時，數字“1”在框中移動，但我無法將框本身移動到 div 的中間。

我需要更改哪個屬性，還是需要添加另一個包裝 div？

uj5u.com熱心網友回復：

這是示例代碼，它可能會讓您對您的案例有所了解。

.sampleDiv{
  display: flex;
  gap:10px;
  justify-content: space-around;
}
.playerOneScoreDiv,
.playerTwoScoreDiv{
  background: red;
  flex-basis: 25%;
  display: flex;
  align-self: center;
  justify-content: center;
}
.midDiv{
  background: green;
  flex-basis: 50%;
}

<div class="sampleDiv">
    <div class="playerOneScoreDiv">1</div>
    <div class="midDiv">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    <div class="playerTwoScoreDiv">3</div>
</div>

讓我簡要解釋一下這段代碼：

我已將父 divsampleDiv設為flex，而您可能正在尋找的主要內容是justify-content: space-around. 要了解有關justify-content您的更多資訊，請訪問此處
雖然第一種情況應該可以滿足您的需求，但如果您想要更多地控制和切換每個子 div 的位置，您也可以將此子 div 設定為新flex的。如果您添加屬性align-self, with align-self:center，它將嘗試將自己與交叉軸對齊。對于，align-self您可以訪問所有可用選項：https ://developer.mozilla.org/en-US/docs/Web/CSS/align-self
gap將增加每個彈性專案之間的差距
flex-basis將設定彈性專案的大小

uj5u.com熱心網友回復：

HTML：

<div id="container">
  <div id="left">
    
  </div>
  <div id="middle">
    
  </div>
  <div id="right">
    
  </div>
</div>

CSS：

#container {
  width: 220px;
  height: 32px;
  background-color: khaki;
  overflow-x: clip;
  display: flex;
}

#left {
  justify-content: left;
  width: 32px;
  float: left;
  height: 32px;
  line-height: 32px;
  background-color: darkkhaki;
}

#middle {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background-color: darkkhaki;
}

#right {
  width: 32px;
  height: 32px;
  float: right;
  background-color: darkkhaki;
}

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

標籤：html css 反应有角度的弹性盒

上一篇：setValue動態到angular7中的物件

下一篇：ngstore呼叫時不保存狀態