为什么我的日志与 header 上的文字不一致？

Question

我试图制作我的 header，非常简单，只是一个徽标和一些文本。但我无法将我的文字与我的图像对齐。有谁知道为什么会这样以及我该如何解决这个问题？

这是我的代码。

header {
    background-color:lightblue;
}

.nav-box {
    position: relative;
    width: 940px;
    height: 250px;
    margin: 0 auto auto 0;
}

.logo-header {
    height: 150px;
    width: 150px;
    position: absolute;
    top: 25px;
    left: 0;
    margin-left: 2em;
    padding: 1em;
}

.header-text { 
    position: absolute;
    top: 50%;
    right: 0;
}

.welcome-msg {
    font-weight: bold;
    color: gray;
    -webkit-text-stroke-width: 0.1px; 
    -webkit-text-stroke-color: #000;
    padding: 0.5px; 
}

    <header>  
    <div class="nav-box">
        <img class="logo-header" src="C:\Users\gusta\OneDrive\Desktop\Programação\to-do\ToDo\tasks\templates\images\logo\logo_transparent.png">
        <div class="header-text">
            <h2 class="welcome-msg">Welcome to Tasks to be Done!</h2> 
            <p  class="welcome-msg">Put your tasks right bellow, </p>
            <p  class="welcome-msg">press start in the tracker button and let´s do it! </p>
        </div>
    </div>
</header>

This is what shows up on my page

Answer 1

将您的想象标签放在文本所在的 div 内，并从图像和文本中删除所有对齐内容，这样当您在 div 中进行更改时，所有内容都会对齐在一起 class.

如果您改变了将徽标和文本设置在另一个之上的想法，并且想要并排放置，则可以使用属性 display: flex;这将使项目只需要 space 他们需要将其放入页面并且他们可以并排放置。

Answer 2

我刚刚在我的编辑器中做了这个。应该给你你想要的。

 `.nav-box {
    position: relative;
    width: 100%;
    height: 250px;
    margin: 0 auto auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-header {
    height: 150px;
    width: 150px;
    position: absolute;
    top: auto;
    bottom: auto;
    left: 0;
    margin-left: 2em;
    padding: 1em;
}

.header-text {
    /* removed styling */
}`

为什么我的日志与 header 上的文字不一致？

Why my log is not align with my text on the header?

html

css

header