html / css：在徽标上显示flex无法正常工作

发布于 2025-02-11 20:58:04 字数 1534 浏览 1 评论 0原文

希望大家一切都好。

我是Web开发的新手，我正在与 https：https：// wwwwwwww。 youtube.com/watch?v=bfvfqumjvsa＆amp； ab_channel = codinglab 和5:20 Timestamp左右，我没有得到与视频中的结果相同的结果。有人可以帮我了解怎么了吗？

编辑：我尝试更改为显示：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>

原文

hope you all are doing well.

I am new to web development and I am coding along with https://www.youtube.com/watch?v=bFvfqUMjvsA&ab_channel=CodingLab and around 5:20 timestamp I am not getting the same result as the one in the video. Can anyone please help me understand what's wrong?

Edit: I tried changing to display: inline-flex; but I'm still not getting the same result.

Expected Result based on video:

Actual Result I am getting:

.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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凯凯我们等你回来 2025-02-18 20:58:04

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

1。图像 2

。
因此，就他而言，它将是.image-Text，但在您的情况下是＆lt; header＆gt;

您可能会想：“但是我写了相同的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不触摸它，没关系！

良好的学习！

first of all, to make the code work you need that

1. the image 2. span (text)

to be inside the same parent element
so in his case, it would be .image-text but in your case is the <header>

you may think: "but I write the same CSS, why is not working?"

so yes, the problem is not in your CSS! instead is in HTML!

❌ your previous HTML code:

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

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

✅ the code needs to be like this:

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

the CSS don't touch it, is ok!

good learning!

回复收藏 0 原文

鸠魁 2025-02-18 20:58:04

在标题中添加Flex

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

Add flex in Header

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

回复收藏 0 原文

世界和平 2025-02-18 20:58:04

您要在父元素上设置flex而不是孩子

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

You are to set the flex on the parent element not child

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

回复收藏 0 原文

呆° 2025-02-18 20:58:04

.sidebar header {
  display: flex;
  align-items: center;
  justify-content: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>

.sidebar header {
  display: flex;
  align-items: center;
  justify-content: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>

回复收藏 0 原文

~没有更多了~