图像卡在标题底部

Question

，所以我的图像徽标被卡在我的标题底部，这就是它的外观，这就是我想要的，我删除了一些代码，这只是我的nav东西，所以我我认为这没关系。我尝试过垂直对齐，但这无效。那么，将这种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

在您的帖子上检查我的编辑。

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

Answer 2

垂直align：中间仅在表中工作或DIV具有属性显示：table;

您最好使用边距定位图像。

但是，如果您想使用垂直 - align，则可以这样做：http：//codepen.io/anon/pen/pen/sdbry