Как выровнять 4 абзаца в каждом углу и 1 в центре - PullRequest
Новая
       4

Как выровнять 4 абзаца в каждом углу и 1 в центре

0 голосов
/ 05 марта 2019

Я хочу 4 абзаца в углу и 1 в центре div, как я могу это сделать?

1 Ответ

1 голос
/ 05 марта 2019

Надеюсь, я вас правильно понял. Я привел вам пример плунжера: 

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas:
        'first  .     second'
        '.      third .     '
        'fourth .     fifth';
        width: 500px;
        height: 500px;
        border: 1px solid red;
      }
      
      .container > p {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid black;
      }
      
      .first {
        grid-area: first;
      }
      
      .second {
        grid-area: second;
      }
      
      .third {
        grid-area: third;
      }
      
      .fourth {
        grid-area: fourth;
      }
      
      .fifth {
        grid-area: fifth;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p class="first">1</p>
      <p class="second">2</p>
      <p class="third">3</p>
      <p class="fourth">4</p>
      <p class="fifth">5</p>
    </div>

  </body>

</html>

https://plnkr.co/edit/IoR8muSmBLtFZIXLOvPe?p=preview

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...