CODEWITHSUNDEEP
cssreactjsjsx
JSXStarter
JSXStarter

Reputation: 61

how can I make align-items work in reactJS?

I have 4 boxes which I'm using them as component , when I'm applying justify-content:center it is centering my items in terms of with , but when I'm trying to use align-items:center , it's not working , and the more confusing thing that I made body color teal and the whole page turned teal but in developer tools it shows that I only have small amount of height, so why the whole page turned to teal ?

import React from 'react';
import "./App.css"
function Myfunc(props){
    return(
        <div className="holder">
            <h1>{props.text}</h1>
        </div>
     );
}
export default Myfunc;

import React from "react";
import Myfunc from "./CSSexample";
function App(){
    return(
       <div className="container">
         <Myfunc text=""/>
         <Myfunc text=""/>
         <Myfunc text= ""/>
         <Myfunc text=""/>
       </div>
    );
}
export default App;

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.holder{
    background-color: crimson;
    width: 10rem;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid white;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: teal;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

Upvotes: 1

Views: 401

Answers (1)

Prakash S
Prakash S

Reputation: 2073

Try setting the width/height of container

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  height: 100vh;
  width: 100vw
}

Upvotes: 2

Related Questions