I have a menu where the logo of the site is positioned 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 correctly in all browsers, and before I decide to use this placement method, I wanted to position it using vertical-align . Is it possible?
There are several ways to do this. But if I understand you want to do a vertical-align middle . Okay?
To use vertical-align regardless of its value, you must use the table , table-cell property. They relate.
But what you can do to make it easier is to define a line-height in your HEADER.
Looking like this:
<header>
<a href="#">
<img src="logo.png" />
</a>
</header>
header{
line-height: 120px;
}
The image will automatically be in the middle.
As Diego said the only way to work with the vertical-align is to use table and table-cell. If you really want to use it, try doing it that 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
}