Home > OS >  Unable to center block element horizontally
Unable to center block element horizontally

Time:10-13

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 Edit Invisible Backdrop

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
  • Related