html - 图片卡在页眉底部

Question

所以我的图像 Logo 卡在了标题的底部，this is what it looks like和 this is what I want我删除了一些只是我的导航内容的代码，所以我认为这无关紧要。我试过垂直对齐，但没有用。那么是什么让这个 img 卡在底部，最有效的修复方法是什么？

附带说明一下，我怎样才能学会编写更好的 HTML/CSS？我已经看到你们中的一些人的代码完成了我试图让我的代码完成的事情，但代码更少而且更有效。我怎样才能学会更高效地使用我的代码？

HTML5

<div class="header-wrapper">
    <header class="main-header">
        <img src="Images/home_styles_logo_white.png" alt="Home Styles Logo" />
    </header>
</div>

CSS3

.header-wrapper {
    width: 100%;
    padding: 3% 0;
    background-color: #2CAD96;
}

.main-header {
    width: 70%;
    margin: 0 auto;
}

.main-header img {
    float: left;
    padding-right: 10%;
    vertical-align: middle;
}

Answer 1

检查我对你帖子的编辑..相对位置，负 top 属性会做

.header-wrapper {
    width: 100%;
    padding: 3% 0;
    background-color: #2CAD96;
}

.main-header {
    width: 70%;
    margin: 0 auto;
}

.main-header img {
    float: left;
    padding-right: 10%;
    position:relative;
    top:-30px;
}