Search code examples
htmlcsstext-align

How to center a group of left aligned paragraphs?


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!


Solution

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