Flexbox: Попытка получить элементы H1 над элементом абзаца - PullRequest
Новая
       7

Flexbox: Попытка получить элементы H1 над элементом абзаца

0 голосов
/ 15 мая 2018

То, что я хочу, относительно просто.Я хотел знать, как получить элементы H1 на этой странице в центре над элементами абзаца посередине.У меня здесь куча неприятностей, и мне нужна помощь с тем, как я могу решить эту проблему во flexbox.Спасибо, вот мой код 

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="flex.css">
  </head>
  <body>


    </div>
    <div class="parent">

      <div class="col1">
      <h1>Heading 1</h1>
       <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit,
       sed do eiusmod tempor incididunt ut labore et dolore magna
       aliqua. Ut enim ad minim veniam, quis nostrud exercitation
       ullamco laboris nisi ut aliquip ex ea commodo consequat.
       Duis aute irure dolor in reprehenderit in voluptate velit
       esse cillum dolore eu fugiat nulla pariatur. Excepteur
       sint occaecat cupidatat non proident, sunt in culpa qui
       officia deserunt mollit anim id est laborum
      </p>
    </div>

      <div class="col2">

        <h1>Heading 2</h1>
      <p>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
      do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco
      laboris nisi ut aliquip ex ea commodo consequat. Duis aute
      irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt
      mollit anim id est laborum
     </p>
     </div>
    </div>
  </body>
</html>

Вот мой CSS 

.parent, .col1, .col2 {
  display: flex;
   flex-flow row wrap;
}

h1 {
  align-self:center;
}

Ответы [ 3 ]

0 голосов
/ 15 мая 2018

Добавьте justify-content: center; к col1 и col2 div

0 голосов
/ 15 мая 2018

Просто небольшая корректировка, которую вам нужно сделать, вместо того, чтобы использовать стиль align-self: center, используйте свойство text-align: center, поскольку оно выравнивает текст по центру вместо самого поля. Также во flexbox только родитель должен иметь дисплей: flex; свойство, а не столбцы. Замените стиль, который вы указали в своем вопросе, на этот, и он должен работать как положено. Пожалуйста, дайте мне знать, если это ответило на ваш вопрос. У вас также есть дополнительный тег под открывающим тегом тела, который не имеет открывающего тега div и должен быть удален.

https://codepen.io/Katercode/pen/BxOWvw

.parent {
  display: flex;
  flex-flow: row wrap;
}

h1 {
  text-align: center;
}
0 голосов
/ 15 мая 2018

Вам не нужно использовать свойство flex в .col1, .col2, заставляя их сгибаться, вы ожидаете, что элемент внутри, например, h1 и p, также выровняется как элементы flex. Так что удалите display:flex форму .col1, .col2 и установите text-align в h1

  .parent {
  display: flex;
   flex-flow row wrap;
   }

h1 {
  text-align:center;
 }
 
  <body>



    </div>
    <div class="parent">

      <div class="col1">
      <h1>Heading 1</h1>
       <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit,
       sed do eiusmod tempor incididunt ut labore et dolore magna
       aliqua. Ut enim ad minim veniam, quis nostrud exercitation
       ullamco laboris nisi ut aliquip ex ea commodo consequat.
       Duis aute irure dolor in reprehenderit in voluptate velit
       esse cillum dolore eu fugiat nulla pariatur. Excepteur
       sint occaecat cupidatat non proident, sunt in culpa qui
       officia deserunt mollit anim id est laborum
      </p>
     </div>

      <div class="col2">

        <h1>Heading 2</h1>
      <p>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
      do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco
      laboris nisi ut aliquip ex ea commodo consequat. Duis aute
      irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt
      mollit anim id est laborum
     </p>
     </div>
    </div>
  </body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...