CODEWITHSUNDEEP
htmlcssreactjsangularflexbox
abidinberkay
abidinberkay

Reputation: 2025

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

The design of the page is barely this:

Enter image description here

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?

Upvotes: 1

Views: 1091

Answers (2)

Saroj Shrestha
Saroj Shrestha

Reputation: 2895

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

Upvotes: 1

Jay
Jay

Reputation: 106

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

Upvotes: 1

Related Questions