HTML / CSS :在徽标上显示flex不起作用

Question

希望你们都做得很好。

我是网络开发的新手，我和https://www.youtube.com/watch?v=bFvfqUMjvsA&ab_channel=CodingLab一起编码，大约5:20的时间戳我没有得到与视频中的结果相同的结果。谁能帮我弄明白怎么回事吗？

编辑:我尝试更改为display: inline-flex;，但仍然没有得到相同的结果。

基于视频的预期结果：

​

​

我得到的实际结果是：

​

​

​

.sidebar header .image-text {
  display: flex;
  align-items: center;
}

<nav class="sidebar">
  <header>
    <!-- ===== Logo ===== -->
    <div class="image-text">
      <span class="image">
                    <img src="https://via.placeholder.com/100jpg" alt="candlestick logo">
                </span>
    </div>

    <!-- ===== Logo Text ===== -->
    <div class="text header-text">
      <span class="name">TradeJournal</span>
      <span class="creator">By RS</span>
    </div>
  </header>
</nav>

​

Answer 1

首先，要使代码正常工作，您需要

1. 2. span (文本)

在同一个父元素中

所以在他的例子中，应该是.image-text，但在您的例子中是<header>

你可能会想：“但我写同样的CSS，为什么不工作？”

所以是的，问题不在你的CSS中！而是在HTML中！

❌您以前的HTML代码：

<nav>
 <header>
   <div class="image-text">
     <!-- image tags code -->
   </div>

   <!-- text (error: you putted this outside the .image-text) -->
  </header>
</nav>

✅代码需要如下所示：

<header>
  <div class="image-text">
    <!-- image tags code -->
    <!-- text -->
  </div>
</header>

CSS不碰它，没事的！

好学！

Answer 2

在标头中添加flex

.sidebar header {
display: flex;
align-items: center; }

Answer 3

您将在父元素而不是子元素上设置flex。

.sidebar header{
display: flex;
align-items: center; }