css - Unable to center block element horizontally

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