如何使一组左对齐的段落居中？答案

【问题标题】：How to center a group of left aligned paragraphs?如何使一组左对齐的段落居中？
【发布时间】：2020-05-22 07:57:40
【问题描述】：

我是 HTML/CSS 新手，如果这对您来说非常基础，我很抱歉，但我想知道如何将一组并排段落居中对齐。我到目前为止是这样的：

<!DOCTYPE html>
<html>
<head>
    <style>
        footer h3 {
            text-align: center;
        }

        footer p {
            width: 33.333%;
            float: left;
        }
    </style>
</head>
<body>
    <footer>
        <h3>CONTACTS AND ADDITIONAL INFO</h3>
        <p>Contact:<br />pinyscontact@piny.com</p>
        <p>Address:<br />Pine city, unit 2534</p>
        <p>Copyright:<br />Nope</p>
    </footer>
</body>
</html>

我尝试搜索解决方案并尝试了它们，但之后我无法为这组段落提供一个共同的背景颜色。感谢您的宝贵时间！

【问题讨论】：

标签： html css text-align

【解决方案1】：

我希望这就是你要找的。p>

<!DOCTYPE html>
<html>
<head>
    <style>
        footer h3{
            text-align: center;
        }

        footer p {
            width: 33.333%;
            margin-left: auto;
            margin-right: auto; 
            background: lime;
        }
    </style>
</head>
<body>
    <footer>
        <h3>CONTACTS AND ADDITIONAL INFO</h3>
        <p>Contact:<br />pinyscontact@piny.com</p>
        <p>Address:<br />Pine city, unit 2534</p>
        <p>Copyright:<br />Nope</p>
    </footer>
</body>
</html>

【讨论】：

不，这不是我想要的，因为文本居中对齐。我想要实现的是每个段落左对齐但所有段落居中。
@piny88 请查看更新后的代码 sn-p 进行更改。我希望我能理解你。

【解决方案2】：

这就是你要找的吗？

<!DOCTYPE html>
<html>
<head>
    <style>
        footer h3 {
            text-align: center;
        }

        footer p {
            /* width: 33.333%; */
            /* float: left; */
        }

        .flex-container {
            display: flex;
            justify-content: space-evenly;
        }

    </style>
</head>
<body>
    <footer>
        <h3>CONTACTS AND ADDITIONAL INFO</h3>
        <div class="flex-container">
            <p>Contact:<br />pinyscontact@piny.com</p>
            <p>Address:<br />Pine city, unit 2534</p>
            <p>Copyright:<br />Nope</p>
        </div>
    </footer>
</body>
</html>

【讨论】：

是的，这就是我要找的。谢谢！
太棒了。几周前我学习了 flexbox。这是我的首选：css-tricks.com/snippets/css/a-guide-to-flexbox.

【解决方案3】：

好兄弟，让我帮你

然后添加

text-align: center;

另外，如果您想为所有段落使用共同的背景颜色

background-color: /*your background color I'll just use yellow in this case*/;

您的整个代码将如下所示

<!DOCTYPE html>
<html>

<head>
  <style>
    footer h3 {
      text-align: center;
    }
    
    footer p {
      width: 33.333%;
      text-align: center;
      float: left;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <footer>
    <h3>CONTACTS AND ADDITIONAL INFO</h3>
    <p>Contact:<br />pinyscontact@piny.com</p>
    <p>Address:<br />Pine city, unit 2534</p>
    <p>Copyright:<br />Nope</p>
  </footer>
</body>

</html>

【讨论】：

【解决方案4】：

如果您的意思是希望段落文本居中，您只需将text-align: center 添加到您的页脚css。

如果您的意思是让段落在屏幕上居中，从而使段落大小相同，我认为没有使用 flexbox 或 CSS 网格的简单方法可以解决这个问题。将所有段落设置为 33.333% 并使用自动边距可能足够有效，但这不是最有效的方法。

使用 CSS flexbox 将使所有内容居中变得非常容易：

<html>
<head>
    <style>
        /* your container element */
        footer {
            text-align: center;

            /* makes your parent container into a flex element */
            display: flex;

            /* the flex rule which will spread out your content evenly across its parent container */
            justify-content: space-between;
        }

        footer p {
            background: lightblue;
        }
    </style>
</head>
<body>
    <footer>
        <h3>CONTACTS AND ADDITIONAL INFO</h3>
        <p>Contact:<br />pinyscontact@piny.com</p>
        <p>Address:<br />Pine city, unit 2534</p>
        <p>Copyright:<br />Nope</p>
    </footer>
</body>
</html>

你可以在这个网站here.阅读更多的flexbox规则

【讨论】：