Не удается получить flexbox для вертикального выравнивания элементов - PullRequest
Новая
       21

Не удается получить flexbox для вертикального выравнивания элементов

0 голосов
/ 13 февраля 2019

Я только начинаю изучать HTML / CSS и не могу заставить flexbox вертикально выравнивать элементы (или вообще что-то делать).У меня проблемы с концептуальным пониманием, почему он не распознает элементы как отдельные элементы для оправдания.

CSS и HTML: 

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.odd-elements {
  margin: auto;
  width: 100px;
  height: 100px;
  border-top-width: 1px;
  border-top-color: #687291;
  border-top-style: solid;
  text-align: center;
  background-color: #dfe1e7;
}

.even-elements {
  margin: auto;
  width: 100px;
  height: 100px;
  border-top-width: 1px;
  border-top-color: #687291;
  border-top-style: solid;
  text-align: center;
  background-color: #eeeff2;
}

#e6 {
  margin: auto;
  width: 100px;
  height: 100px;
  border: 4px solid black;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  background-color: #687291;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="styleA.css" />
  <title>CS142 Project #1</title>
</head>

<body>
  <div class="box">
    <span class="odd-elements">A</span>
    <span class="even-elements">B</span>
    <span class="odd-elements">C</span>
    <span class="even-elements">D</span>
    <span class="odd-elements">E</span>
    <span id="e6">F</span>
  </div>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

Если вы хотите центрировать ваш дочерний элемент, вы должны использовать его в качестве гибкого контейнера.В этом случае теги span - это ваш ребенок.Итак, вы должны добавить display: flex (для создания контейнера flex), justify-content: center, align-items: center в ваш тег span.Кстати, было бы здорово, если бы вы добавили общий класс в ваш тег span.

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.box span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.odd-elements {
  margin: auto;
  width: 100px;
  height: 100px;
  border-top-width: 1px;
  border-top-color: #687291;
  border-top-style: solid;
  text-align: center;
  background-color: #dfe1e7;
}

.even-elements {
  margin: auto;
  width: 100px;
  height: 100px;
  border-top-width: 1px;
  border-top-color: #687291;
  border-top-style: solid;
  text-align: center;
  background-color: #eeeff2;
}

#e6 {
  margin: auto;
  width: 100px;
  height: 100px;
  border: 4px solid black;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  background-color: #687291;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="styleA.css" />
  <title>CS142 Project #1</title>
</head>

<body>
  <div class="box">
    <span class="odd-elements">A</span>
    <span class="even-elements">B</span>
    <span class="odd-elements">C</span>
    <span class="even-elements">D</span>
    <span class="odd-elements">E</span>
    <span id="e6">F</span>
  </div>
</body>

</html>
0 голосов
/ 13 февраля 2019

Просто измените свой CSS на: 

      .odd-elements, even-elements{
         display: inline-flex;
         justify-content: center;
         align-items: center;
       }
...