Question

我才刚刚开始学习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>

Answer 1

只需将CSS更改为：

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

Answer 2

如果要居中放置子项，则必须将子项用作伸缩容器。在这种情况下，span标签就是您的孩子。因此，您必须在span标记中添加display：flex（要做flex容器），justify-content：居中，align-items：居中。顺便说一句，如果您在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>

无法使Flexbox垂直对齐元素

2 个答案: