i need to change to layout of the buttons and the counter-CodePudding

counter.js

import "./Counter.css";
const Counter = (props) => {
  return (
    <div className="counter">
      <h1>{`Counter ${props.count}`}</h1>
      <div className="counter__buttons">
        <button onClick={props.incrementCounter}>Increment</button>
        <button onClick={props.decrementCounter}>Decrement</button>
      </div>
    </div>
  );
};

Counter.css

.counter {
  display: flex;
  color: white;
  align-items: center;
  width: 100%;
  height: 100%;
}

.counter > .counter__buttons > button {
  color: black;
  background-color: grey;
  margin: 10px;
  padding: 30px;
  border: 0;
  border-radius: 10px;
}

i want to move the buttons below counter and place the counter and buttons in the center of the page how to change it , display : flex in counter should not be removed

CodePudding user response：

Would something like this work? You can set the flex-direction of a wrapping div to column and set the second div (in your case your buttons) back to flex-direction: row and finally just center it with margin: 0 auto.

<div id="wrap">
  <div id="one">1</div>
  <div id="two">2
    <div id="three">3</div>
    <div id="four">4</div>
  </div>
</div>

#wrap {
  display: flex;
  flex-direction: column;
}

#two {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
}

CodePudding user response：

Do you want something like this?

.page {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
 }

.counter {
  display: flex;
  flex-direction: column; /* add this */
  color: white;
  align-items: center;
  /* width: 100%;*/
  /* height: 100%;*/
}

.counter > .counter__buttons > button {
  color: black;
  background-color: grey;
  margin: 10px;
  padding: 30px;
  border: 0;
  border-radius: 10px;
}

<div class="page">    
  <div class="counter">
      <h1>Counter 5</h1>
      <div class="counter__buttons">
        <button onClick={props.incrementCounter}>Increment</button>
        <button onClick={props.decrementCounter}>Decrement</button>
      </div>
    </div>
</div>

If so, you can make your whole page a flex container and use justify-content and align-items just like you did it for the .counter.

(I did HTML instead of JSX so I could add the snippet easier... don't forget to make changes in your own code)