如何将一组左对齐的段落居中？

Question

我是 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>

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

Answer 1

希望这就是您要找的。

<!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>

Answer 2

好的，哥们让我帮你

之后添加

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>

Answer 3

如果您的意思是希望段落文本居中，则只需将 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>

您可以在本网站阅读更多 flexbox 规则 here.

Answer 4

这是您要找的吗？

<!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>

如何将一组左对齐的段落居中？

How to center a group of left aligned paragraphs?

html

css

text-align