代码之家 › 专栏 › 技术社区 › abidinberkay

如何将<div>中的项目与React应用程序中的CSS对齐?

flexbox angular reactjs css html

abidinberkay · 技术社区 · 3 年前

页面的设计基本上是这样的:

我想做的是把Redbox(其中有1个)放在 “游戏指南”

“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>

PlayerEndiv和outer 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;
}

当我和 游戏者 ,数字“1”在盒子里移动,但我无法将盒子本身移动到div的中间。

我需要更改哪个属性,或者需要添加另一个包装器div?

2 回复 | 直到 3 年前

Saroj Shrestha 3 年前

下面是示例代码,它可能会让您了解您的案例。

.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>

让我简单解释一下这段代码:

我已经做了家长课 sampleDiv 像 flex ,你可能要找的主要东西是 justify-content: space-around .了解更多关于 justify-content 你可以参观 here
虽然第一种情况可能会满足您的需求,但如果您想拥有更多控制权并切换每个子div的位置,可以将该子div设置为新的 弯曲 也如果你添加属性 align-self 具有 align-self:center ,它将尝试将自身与十字轴对齐。对于,上的所有可用选项 自我调整 您可以访问: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
gap 将在每个弹性项目之间增加间隙
flex-basis 将设置弹性项的大小

Jay 3 年前

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;
}