Question

所以我的图片徽标卡在标题的底部，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

检查我的帖子上的编辑..相对位置，负顶级属性会这样做

.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

vertical-align：middle仅适用于表格或div具有属性display：table;

最好使用边距定位图像。

但是，如果您想使用vertical-align，则可以执行以下操作：http://codepen.io/anon/pen/sdBry

图像卡在标题的底部

2 个答案: