因此，基本上我的问题是，每当我想使用Align-Intems：带有H1和Nav-Bar的中心时，它都行不通。我的意思是，这两者都居中，但不太正确。这是我感兴趣的代码的一部分：
<header class="main-header">
<h1>The Code Magazine</h1>
<nav>
<a href="blog.html">Blog</a>
<a href="#">Challenges</a>
<a href="#">Flexbox</a>
<a href="#">CSS Grid</a>
</nav>
</header>
当我只选择H1和NAV的容器时，CSS应该可以工作，然后将其设置为flex：
.main-header {display：flex flex ;准项目：中心； } ，
但是当我这样做时，这是结果：
这就是看起来
，这就是它看起来的样子：
这是我想要的结果
希望有人可以在这里帮助我，我在CSS中是很新的。谢谢。
So basically my problem is that whenever I want to use align-items: center with an h1 and a nav-bar, it doesn't work. I mean, it centers both but not quite right. This is the part of the code I'm interested in:
<header class="main-header">
<h1>The Code Magazine</h1>
<nav>
<a href="blog.html">Blog</a>
<a href="#">Challenges</a>
<a href="#">Flexbox</a>
<a href="#">CSS Grid</a>
</nav>
</header>
The css should work when I just select the container for both the h1 and the nav, and set it to flex like this:
.main-header { display: flex; align-items: center; }
but when I do that this is the result:
This is how it looks
And this is how it's supossed to look:
This is the result I want
Hope someone could help me out here, I'm quite new in CSS. Thanks.
发布评论
评论（1）
您可以比较较低的病例和上情况，请尝试此
You compare between lower case and upper case, try this https://codesandbox.io/s/dazzling-cache-dds7id?file=/index.html:246-281