无法水平居中块元素答案

【问题标题】：Unable to center block element horizontally无法水平居中块元素
【发布时间】：2021-12-01 04:58:53
【问题描述】：

我无法将以后成为博客文章列表的元素居中。 Postlist 元素被加载到我的 App.js 文件中。我能够使用在 Horizontally 部分和标题为 Is there more than one block level element? 的小节下提到的 here 技术使导航栏居中，但是当我尝试在博客文章列表上执行相同的技术，但它不起作用，请记住，博客文章列表将来会是动态的。

PostList.css 文件：

.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;
}

还有Postlist.js文件：

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

【问题讨论】：

请提供minimal reproducible example，考虑使用像codesandbox.io这样的js游乐场

标签： css reactjs

【解决方案1】：

它的行为与您设置的 css 规则完全相同。

.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.
}

虽然我建议您将最大宽度设置为容器并从博客元素中删除宽度。

【讨论】：

【解决方案2】：

.blog-list-container {   
    text-align: center;
}
.blog-element {
    display: block;
    width: 50%;
    padding: 60px 30px;
    margin: 0 auto; // new line
}

仅在您的代码中添加此行

或者这样的代码

 .blog-list-container {   
        text-align: center;
    }
    .blog-element {
        display: block;
        padding: 60px 30px;
    }

【讨论】：

【解决方案3】：

对于某些建议，有一个更简洁的速记替代方案：

.blog-element {
    display: block;
    width: 50%;
    padding: 60px 30px;
    margin: 0 auto;
}

但我建议使用flexbox：

在查看您的代码和提及的内容时，您应该考虑 D.R.Y.编写组件时，例如：

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

【讨论】：