CODEWITHSUNDEEP
htmlcss
SecretWalrus
SecretWalrus

Reputation: 99

Image stuck at bottom of header

So my image logo is stuck at the bottom of my header, this is what it looks like and this is what I want I removed some of the code which is just my nav stuff so I'm thinking that shouldn't matter. I have tried vertical align but that didn't work. So whats keeping this img stuck at the bottom and what's the most efficient way to fix it?

On a side note, how can I learn to write better HTML/CSS? I've seen some of your guys code that does what I try to get my code to do, but with a lot less code and beautifully more effective. How can I learn to be more efficient with my code?

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

Upvotes: 0

Views: 763

Answers (2)

httpgio
httpgio

Reputation: 127

Check my edit on your post.. relative position, and negative top property will do it

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

Upvotes: 1

Jarred Kenny
Jarred Kenny

Reputation: 33

vertical-align: middle only works within tables or when a div has the property display: table;

You are better off positioning the image using a margin.

However, if you want to use vertical-align, you can do this: http://codepen.io/anon/pen/sdBry

Upvotes: 0

Related Questions