Solution 1 :

I hope this is what you are looking for.

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

Solution 2 :

Is this what you’re looking for?

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

Solution 3 :

Sure buddy let me help you

After that add

text-align: center;

Plus if you want a common background color for all paragraphs use

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

Your whole code would then look something like this

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

Solution 4 :

If you mean that you want the paragraph text to be centered, you would just have to add text-align: center to your footer css.

If you mean for the paragraphs to be centered across the screen, thus making the paragraphs the same size, I don’t think there’s an easy way to answer that without using flexbox or CSS grid. Setting all of your paragraphs to 33.333% and using auto margins might be effective enough, but it’s not the most efficient way.

Using CSS flexbox would make centering everything very easy:

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

You can read more flexbox rules on this website here.

Problem :

I’m new to HTML/CSS so sorry if this is pretty basic to you but I was wondering how I could center align a group of side by side paragraphs. What I have so far is this:

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

I tried searching up solutions to this and tried them but I couldn’t give the group of paragraphs a common background-color after. Thanks for your time!

Comments

Comment posted by piny88

No, this is not what I was looking for as the text is center-aligned. What I’m trying to achieve is left-aligning each paragraph but centering all the paragraphs.

Comment posted by yinsweet

@piny88 Please see the updated code snippet for the change. I hope I understand you well.

Comment posted by piny88

Yes, that’s what I was looking for. Thanks!

Comment posted by css-tricks.com/snippets/css/a-guide-to-flexbox

Great. I learned flexbox a few weeks ago. This was my go-to:

By

Leave a Reply

Your email address will not be published. Required fields are marked *