I am struggling with centering elements for a list of upcoming blog posts. The Postlist component is integrated into my App.js file. Although I successfully centered the navigation bar following the method described here in the Horizontally section and specifically under the subsection named Is there more than one block level element?, I encountered difficulties when trying to apply the same approach to the list of blog posts. It should be noted that this blog post list will be dynamic in the future.
PostList.css file:
.blog-list-container {
display: block;
text-align: center;
margin: 0 auto;
}
.blog-element {
display: block;
width: 50%;
padding-top: 60px;
padding-bottom: 60px;
padding-right: 30px;
padding-left: 30px;
}
And Postlist.js file:
import React from 'react';
import App from '../../App';
import './PostList.css';
import {
BrowserRouter as Router,
Routes,
Route,
Link,
Outlet,
useParams
} from 'react-router-dom';
const PostList = ( props ) => (
<div className="blog-list-container">
<Router>
<Link to={'/posts/${}'} className="blog-element">element 1</Link>
<Link to={'/posts/${}'} className="blog-element">element 2</Link>
<Link to={'/posts/${}'} className="blog-element">element 3</Link>
</Router>
</div>
);
export default PostList