Center Text with Background

Hello everyone,

I’m currently resolving the Challenge Project: Build a Website Design System.

here’s my HTML code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Guideline</title>
    <link rel="stylesheet" href="resources/css/index.css">
    <link rel="preconnect" href="">
    <link rel="preconnect" href="" crossorigin>
    <link href="" rel="stylesheet">
    <link href="[email protected];400;600&display=swap" rel="stylesheet">
    <div class="Header">
        <h1>Website Guidelines</h1>

    <div class="Colours">
        <p id="dark-green">Colour Name: Dark Green<br>Hex Code: #002927</p>
        <p id="reseda-green">Colour Name: Reseda Green<br>Hex Code: #7F7F62</p>
        <p id="dun">Colour Name: Dun<br>Hex Code: #DBCBA9</p>
        <p id="beaver">Colour Name: Beaver<br>Hex Code: #8D7968</p>
        <p id="licorice">Colour Name: Licorice<br>Hex Code: #1A090D</p>

And here’s my CSS

* {
    background-color: #dbcba9;

h1 {
    font-family: 'Shrikhand', cursive;
    color: #002927;
    letter-spacing: 3px;
    font-size: 45px;
    text-align: center;

h2 {
    font-family: 'Calistoga';
    color: #002927;

.Colours {
    width: 75%;
    margin: auto;
    text-align: center;
    border: 2px solid #002927;
    border-radius: 7px;

p {
    display: inline-block;
    padding: 15px;
    width: 250px;
    height: 100px;
    font-family: Prompt;
    font-weight: 200;

#dark-green {
    background-color: #002927;
    color: white


in this part:

Screenshot 2023-03-29 at 17.43.24

How do I center the texting the center of the rectangle? Do I need to make it an image?

Thank you in advance :blush:

Hi @mafventura you could use this on your paragraph elements.

p {
    display: inline-flex;
    justify-content: center;
    align-items: center;

Just let me know if that works for you. Happy coding !

It worked! Thank you so much :blush:

1 Like

I finally found how to do it. Thank you for sharing this with us!

1 Like

@estherozix Always happy to help !