Мне нужна помощь по центрированию текста в центре CSS Grid - PullRequest
Новая
       0

Мне нужна помощь по центрированию текста в центре CSS Grid

0 голосов
/ 27 мая 2019

Я не могу выровнять текст по центру сетки, как по вертикали, так и по горизонтали, потому что кажется, что ничего из того, что я пробовал, не работает, поэтому я хотел знать, в чем проблема с моим кодом или как мне это сделать.

Я пытался использовать justify-items: center, align-items: center и даже place-items: center center;

Это мой полный, надеюсь, вы можете попробовать и посмотреть, что с ним не так.

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

Ответы [ 3 ]

0 голосов
/ 27 мая 2019

Для выравнивания текста по центру просто используйте это свойство: 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>
0 голосов
/ 27 мая 2019

Вы можете использовать Bootstrap классы, например:

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

Или выравнивание текста по CSS 

main {
    display: flex;
    justify-content: center;
    align-items: center;
}
0 голосов
/ 27 мая 2019

Чтобы выровнять текст, вы можете использовать подход line-height, но это не очень отзывчиво.

Поскольку у вас уже есть макет grid, вы можете сохранить ту же идею и добавить вспомогательный элемент, например <span>. Сделав это, вы получите больше возможностей для освещения самого текста.

Вот пример того, как будет выглядеть ваш новый HTML: 

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

И CSS для этого будет: 

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

main > * {
    margin: auto;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...