CODEWITHSUNDEEP
htmlcssgridview
j.rodriguez25
j.rodriguez25

Reputation: 31

I need help centering text in the center of CSS Grid

I am unable to align text in the center of the grid, both vertical and horizontally, because nothing that I tried seems to work, so I wanted to know what is the problem with my code or how should I do it.

I tried using justify-items: center, align-items: center and even place-items: center center;

This is a my full, hopefully, you can give it a try and see what is wrong with it.

<title> Learning Grid </title>


<style> 


    body {
        color: #fff;
        font-family: sans-serif;
        text-align: center;
    }


    #content {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: minmax(100px, auto);
        grid-gap: 10px;
        max-width: 960px;
        margin: 0 auto;  
    }



    #content > * {
        padding: 30px;
        font-size: 30px;

    }


    header {
        grid-column: 1/13;
        text-align: center;
        background-color: hotpink;
    }


     main {
        grid-column: 4/13;
        grid-row: 2/4;
         background-color: darksalmon;
    }



      aside {
        grid-column: 1/4;
        grid-row: 2/3;
          background-color: cadetblue;
    }



     nav {
        grid-column: 1/4;
        grid-row: 3/4;
         text-align: center;
         font-size: 30px;
         background-color: aquamarine;
    }



     section {
        grid-column: 1/13;
        grid-row: 4/6;
         background-color: coral;
    }


    footer {          
        grid-column: 1/13;
        grid-row: 6/7;
        background-color: cornflowerblue;
    }


</style>


</head>


<body>


    <div id="content"> 


        <header> Header </header>


        <main> Main </main>


        <section>Section </section>


        <aside>Aside </aside>


        <nav> Nav </nav>


        <footer> Footer</footer>


    </div>


</body>

Upvotes: 2

Views: 5195

Answers (3)

Abdelrahman Ashref
Abdelrahman Ashref

Reputation: 101

You can use Bootstrap classes for example :

<main class="text-center justify-content-center align-items-center"> Main </main>

Or aligning text over CSS

main {
    display: flex;
    justify-content: center;
    align-items: center;
}

Upvotes: 0

Makdia Hussain
Makdia Hussain

Reputation: 752

For aligning text to center just use this property: display: flex; align-items: center; justify-content: center;

    body {
        color: #fff;
        font-family: sans-serif;
        text-align: center;
    }
    #content {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: minmax(100px, auto);
        grid-gap: 10px;
        max-width: 960px;
        margin: 0 auto;  
    }
    #content > * {
        padding: 30px;
        font-size: 30px;
    }
    header {
        grid-column: 1/13;
        text-align: center;
        background-color: hotpink;
    }
    main {
        grid-column: 4/13;
        grid-row: 2/4;
        background-color: darksalmon;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    aside {
        grid-column: 1/4;
        grid-row: 2/3;
        background-color: cadetblue;
    }
    nav {
        grid-column: 1/4;
        grid-row: 3/4;
        text-align: center;
        font-size: 30px;
        background-color: aquamarine;
    }
    section {
        grid-column: 1/13;
        grid-row: 4/6;
        background-color: coral;
        display: flex;
        align-items: center;
        justify-content: center;
    }
	footer {          
        grid-column: 1/13;
        grid-row: 6/7;
        background-color: cornflowerblue;
    }
<div id="content"> 
        <header> Header </header>

        <main> Main </main>

        <section>Section </section>

        <aside>Aside </aside>

        <nav> Nav </nav>

        <footer> Footer</footer>
</div>

Upvotes: 2

Bruno Monteiro
Bruno Monteiro

Reputation: 4519

To align the text, you could use the line-height approach, but that is not very responsive.

Since you already have the grid layout, you can keep that same idea and add a helper element, like a <span>. Doing that, give you more options to alight the actual text.

Here is an example of how your new HTML would look like:

<main>
    <span>Main</span>
</main>

And the CSS for that would be:

main {
    grid-column: 4/13;
    grid-row: 2/4;
    background-color: darksalmon;
    display: grid;
}

main > * {
    margin: auto;
}

Upvotes: 1

Related Questions