CODEWITHSUNDEEP
cssreactjs
Jacky
Jacky

Reputation: 895

How to make my picture both vertical and horizontal center?

I was using react.js to build a template website.

When I build the first component, I met the problem.

the problem:

the picture is not in the middle of the page(I mean in vertical and in horizontal)

I have already use CSS flex to make it in the middle.

Why my picture's position is not in the middle of the page?

Just put that picture in that circle.

How to do that?

Here is my Center.js:

 import React from 'react';
 import image from './images/5.png'
 import './Center.css';

 const Center = () =>{
     return(
          <div id="center2">
             <img  id="center" alt="center" src={image}/>
          </div>
     );
   }

   export default Center

my app.js:

   import React, { Component } from 'react';
   import Center from './Components/Center';

   class App extends Component {
  render() {
    return (
     <div>
         <Center/>
      </div>
    );
  }
 }

export default App;

my center.css:

#center2{
text-align:center;
}
#center{
  width:300px;
  height:300px;
}

my webpage on localhost 3000

enter image description here

Upvotes: 0

Views: 759

Answers (1)

Ertan Hasani
Ertan Hasani

Reputation: 1773

If they are static you need to import it:

import image from './images/5.png'

return (
    <div id='center'>
        <img src={image} />
    </div>
)

otherwise you need to move images folder to public directory, and access it by

<div id='center'>
    <img src='./images/5.png' />
</div>

And this is the CSS to make that image on center:

#center2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

Upvotes: 2

Related Questions