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

问题描述 投票:1回答:4

我是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 />[email protected]</p>
        <p>Address:<br />Pine city, unit 2534</p>
        <p>Copyright:<br />Nope</p>
    </footer>
</body>
</html>

我尝试搜索解决方案并进行了尝试,但是之后我无法为该组段落提供通用的背景色。感谢您的宝贵时间!

html css text-align
4个回答
2
投票

我希望这是您想要的。

<!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 />[email protected]</p>
        <p>Address:<br />Pine city, unit 2534</p>
        <p>Copyright:<br />Nope</p>
    </footer>
</body>
</html>

0
投票

肯定的朋友,让我帮您

之后添加

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 />[email protected]</p>
    <p>Address:<br />Pine city, unit 2534</p>
    <p>Copyright:<br />Nope</p>
  </footer>
</body>

</html>

0
投票

[如果您想使段落文本居中,则只需在页脚CSS中添加text-align: center

[如果您要使段落在屏幕上居中,从而使段落大小相同,那么我认为没有一种简单的方法可以在不使用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 />[email protected]</p>
        <p>Address:<br />Pine city, unit 2534</p>
        <p>Copyright:<br />Nope</p>
    </footer>
</body>
</html>

您可以在此网站here.上阅读更多的flexbox规则>


0
投票

这是您要寻找的吗?

© www.soinside.com 2019 - 2024. All rights reserved.