Utilizing react.js to develop a template website has been my current project.
The issue arose when I began constructing the first component of the site.
The dilemma:
The picture was not centered on the page, neither vertically nor horizontally.
Despite using CSS flex to center it, the picture still remained off-center.
Why is the position of my picture not in alignment with the middle of the page?
All I want is for that picture to be inside that circle. How can I accomplish this?
Below is my Center.js code snippet:
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
Here's how my app.js looks like:
import React, { Component } from 'react';
import Center from './Components/Center';
class App extends Component {
render() {
return (
<div>
<Center/>
</div>
);
}
}
export default App;
This is what my center.css file contains:
#center2{
text-align:center;
}
#center{
width:300px;
height:300px;
}
View of my webpage running on localhost 3000: