对齐内容 CSS 属性不适用于类

Question

我正在学习前端web开发并设计自己的产品组合。我偶然发现了一个关于调整内容和对齐项目CSS属性的问题。它们似乎对我的课不起作用。

产品组合演示与当前的CSS&HTML

以下是相关代码：

* {
box-sizing: border-box;
margin: 0%;
padding: 0%;
}
body {
font-family: roboto;
background-repeat: space;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
nav {
display: flex;
height: 20vh;
}
.space1 {
justify-content: center;
align-items: center;
display: flex;
width: 50%;
background-color: lawngreen;
}
.nav-logo {
display: flex;
background-color: red;
width: 50%;
height: 100%;
}
.empty-space1 {
display: flex;
width: 50%;
background-color: tomato;
height: 100%;
}
.space2 {
display: flex;
width: 50%;
background-color: lightyellow;
height: 100%;
justify-content: center;
align-items: center;
}
.empty-space2 {
display: flex;
width: 50%;
background-color: yellow;
height: 100%;
}
.nav-links {
display: flex;
width: 50%;
background-color: tomato;
height: 100%;
}
.nav-links ul {
display: inline-flex;
list-style: none;
height: 100%;
}
.nav-links ul li a {
justify-content: space-evenly;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<nav>
<div class="space1">
<div class="nav-logo">Logo</div>
<div class="empty-space1">lorem
<!--empty space-->
</div>
</div>
<div class="space2">
<div class="empty-space2">lorem
<!--empty space-->
</div>
<div class="nav-links">lorem
<ul>
<li><a href="">About Me</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Tools</a></li>
</ul>
</div>
</div>
</nav>

你能告诉我为什么这不起作用吗？我该如何解决这个问题？

谢谢：(

Answer 1

为了使用align-items和justify-content与中心对齐，您需要将其应用于内容的直接容器。

此外，您的ul元素有一个height: 100%，尽管它前面有更多的文本。所以我删除了它，这样它就不会溢出容器。

/* ADDITION */
.centered-content {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

/* END */
* {
box-sizing: border-box;
margin: 0%;
padding: 0%;
}
body {
font-family: roboto;
background-repeat: space;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
nav {
display: flex;
height: 150px;
}
.space1 {
justify-content: center;
align-items: center;
display: flex;
width: 50%;
background-color: lawngreen;
}
.nav-logo {
display: flex;
background-color: red;
width: 50%;
height: 100%;
}
.empty-space1 {
display: flex;
width: 50%;
background-color: tomato;
height: 100%;
}
.space2 {
display: flex;
width: 50%;
background-color: lightyellow;
height: 100%;
justify-content: center;
align-items: center;
}
.empty-space2 {
display: flex;
width: 50%;
background-color: yellow;
height: 100%;
}
.nav-links {
display: flex;
width: 50%;
background-color: tomato;
height: 100%;
}
.nav-links ul {
display: inline-flex;
list-style: none;
/* REMOVED! */
/* height: 100%; */
justify-content: space-evenly;
}
.nav-links ul a {
margin: 0 .1em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<nav>
<div class="space1">
<div class="centered-content nav-logo">Logo</div>
<div class="centered-content empty-space1">lorem
<!--empty space-->
</div>
</div>
<div class="space2">
<div class="centered-content empty-space2">lorem
<!--empty space-->
</div>
<div class="centered-content nav-links">lorem
<ul class="centered-content">
<li><a href="">About Me</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Tools</a></li>
</ul>
</div>
</div>
</nav>

请注意，我将justify-content: space-evenly;从.nav-links ul li a移动到了.nav-links ul li，这是我们内容的容器。因此，我们希望将其内容均匀地放在空格中。

为了安全起见(确保它们即使在小屏幕上也不会接触(，你可以在每个元素之间添加一个边距来将它们分开：

.nav-links ul a {
margin: 0 .1em;
}