How to align items in <div> with CSS in React app?

May 8, 2022

The design of the page is barely this:

What I want to do is putting Redbox(which has 1 in it) in the middle of "PlayerOneDiv"

and same for 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>

Style of PlayerOneDiv and 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?

>Solution :

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 here
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 can visit: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
gap will add gap between each flex-item
flex-basis will set the size of the flex-item