Respect to image's position, I need to center an image. I'm using react and css

Question

I want to center my image but I don't know how. This is my code.

        text ={

           fontWeight: 'bold'

         }

        screenColor ={
         background: 'lightblue',
         height: 800,
         weight: 500
       }
        render() {
           return(
               <nav className="nav" style={{
                background: 'lightblue',
                height:800,
                weight:600,
                margin: '20 20 0 10',
                padding: '10 10 0 10'
                 }}  >
              <div className="container" style={this.screenColor}>


              <div style={this.text}>Welcome - Programming 3 2019 </div>

              <br></br>

           <img  src={net} style={{
            justifyContent: 'center',
            alignItems: 'center'}}   //These lines from img tag didn't work except src and alt.
             alt="fireSpot"/>


             </div>;
             </nav>
                 )
                   }
                   }

How can I center an image?, I need to solve this. I want to center an image. I'm using react but I need to center the image respect to position.

By other way I want to getting image to lower height.

use ```text-align``` to solve this – Uchit Kumar Feb 15 '20 at 11:51 — Uchit Kumar, Feb 15 '20 at 11:51
wrap that image in a div then apply that – Uchit Kumar Feb 15 '20 at 11:54 — Uchit Kumar, Feb 15 '20 at 11:54

score 1 · Accepted Answer · answered Feb 15 '20 at 11:53

add ClassName in Div tag. and define class in style.

<div className="imgStyle">
  <img  src={net} style={{
            justifyContent: 'center',

            alignItems: 'center'}}   
             alt="fireSpot"/>
</div>

.imgStyle{ 
Display: flex;
Height: 100vh;
Width: 100vw; 
Align-Items: center;
Justify-Content: centre;
}

Respect to image's position, I need to center an image. I'm using react and css

1 Answers1