How can I align items in <div> with CSS in a React app?

Question

The design of the page is barely this:

I want to put Redbox (which has 1 in it) in the middle of "PlayerOneDiv".

And the same for the yellow box for "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>

The style of PlayerOneDiv and the outer div is:

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

When I play with PlayerOneDiv, the number "1" is shifting in the box but I could not shift the box itself into mid of the div.

Which property do I need to change or should I need to add another wrapper div?

Peter Mortensen · Accepted Answer · 2022-05-25 19:18:20Z

1

Here is the sample code that might give you an idea about your case.

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

Let me explain this code briefly:

I have made the parent div sampleDiv as flex, and the main thing you might be looking for is justify-content: space-around. To know more about justify-content, you can visit justify-content
Although the first case, should probably fulfill your needs, in case you want to have more control and switch the position of each child div, you could set this child div as a new flex as well. And if you add the property align-self, with align-self:center, it will try to align itself to the cross axis. For, all available options on align-self you see align-self
gap will add gap between each flex-item
flex-basis will set the size of the flex-item

edited May 25, 2022 at 19:18

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered May 8, 2022 at 1:41

Saroj Shrestha

2,9156 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

abidinberkay Over a year ago

Definitely helps. Thanks

Jay · Accepted Answer · 2022-05-08 01:17:51Z

1

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

answered May 8, 2022 at 1:17

Jay

1241 silver badge10 bronze badges

Collectives™ on Stack Overflow

How can I align items in <div> with CSS in a React app?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related