How to position an image with vertical-align?

Question

I have a menu that poses the logo of the site as follows:

html:

<a href="#">
    <img src="layout/img/logo.png" class="logo" />
</a>

css:

header div a img.logo{
    top:50%;
    transform:translateY(-50%);
    position:relative;
    float:left;
}

However, this way of positioning it does not work properly in all browsers, and before I decided to use this method of positioning, I wanted to position using vertical-align. It is possible?

Answer 1

There are several ways to do this. But if I understood you want to make a vertical-align Middle. Okay ?

To use the vertical-align regardless of its value, one should use the property table, table-Cell. They relate to each other.

But what you can do to facilitate is to define a line-height in your HEADER.

Thus remaining:

<header>
<a href="#">
    <img src="logo.png" />
</a>
</header>


header{
    line-height: 120px;
}

Automatically the image will be in the middle.

Answer 2

As Diego said, the only way to work with vertical-align is by using table and table-Cell. If you really want to use it, try doing it this way.

<header>
    <a href="#" id="conteudo">
        <img src="layout/img/logo.png" class="logo" />
    </a>
</header>

html,body{
    margin: 0;
    padding: 0;
    height: 100%;
}

header {
    width: 100%;
    height: 100%;
    display: table
}

#conteudo {
    display: table-cell;
    vertical-align: middle
}