Unable to center block element horizontally - css

Question

I am unable to center elements that will be a list of blog posts going forward. The Postlist element is loaded into my App.js file. I was able to center the nav bar using the technique mentioned here under the Horizontally section and under the subsection titled Is there more than one block level element? but when I attempt to do the same technique on the list of blog posts, it doesn't work, bear in mind that the list of blog posts 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

Answer 1

There is a cleaner, shorthand alternative to some of the suggested:
.blog-element {
display: block;
width: 50%;
padding: 60px 30px;
margin: 0 auto;
}
but I would advise using flexbox though:
While looking at your code and what is mentioned you should consider D.R.Y. when writing components, example:
const PostList = (props) => (
<div className='blog-list-container'>
<Router>
{posts.map((post) => {
return (
<Link key={post.id} to={post.link} className='blog-element'>
{post.name}
</Link>
)
})}
</Router>
</div>
)
export default PostList

Answer 2

It is behaving exactly as you have set the css rules.
.blog-element {
display: block;
width: 50%;
padding-top: 60px;
padding-bottom: 60px;
padding-right: 30px;
padding-left: 30px;
margin: 0 auto; // will center it to your blog list container.
}
Although i would suggest that you set the max-width to the container and remove the width from blog element.

Answer 3

.blog-list-container {
text-align: center;
}
.blog-element {
display: block;
width: 50%;
padding: 60px 30px;
margin: 0 auto; // new line
}
Add this line only in your code
or Code like this
.blog-list-container {
text-align: center;
}
.blog-element {
display: block;
padding: 60px 30px;
}