时间戳

首页 > 解决方案 > 无法让 flexbox 垂直对齐元素

html - 无法让 flexbox 垂直对齐元素

问题描述

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

标签： htmlcssflexboxvertical-alignment

解决方案

如果您想将子项居中，则必须将您的子项用作弹性容器。在这种情况下，跨度标签就是你的孩子。因此，您必须在 span 标签中添加 display: flex （要做 flex 容器）、 justify-content: center、 align-items: center 。顺便说一句，如果您在 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>

推荐阅读