gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:25:06 25 4
gpt4 key购买 nike

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

最佳答案

只需将您的 CSS 更改为:

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

关于html - 无法让 flexbox 垂直对齐元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54662181/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com