0

Tenho um menu em que posiona a logomarca do site da seguinte forma:

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

Porem, essa forma de posiciona-la não funciona corretamente em todos os navegadores, e antes de eu decidir usar esse método de posicionamento, eu queria posicionar usando vertical-align. É possível?

2 Respostas 2

1

Tem várias formas de fazer isso. Mas se é que eu entendi você quer fazer um vertical-align middle. Okay ?

Para usar o vertical-align independente do seu valor, deve-se usar a propriedade table, table-cell. Elas se relacionam.

Mas o que você pode fazer para facilitar é definir um line-height no seu HEADER.

Ficando assim:

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


header{
    line-height: 120px;
}

Automaticamente a imagem ficará no meio.

1
  • Gostei do seu método, testei aqui e deu certo, mas... tem um probleminha a tag <a> ficou alinhada bem ao meio, mas a tag <img> com a logomarca não ficou no meio, tentei resolver mudando os display's para outros, mas não deu certo. :( sabe como resolvo? [link] (i.imgur.com/eJKz3Vx.png) , aqui está o codigo no JSFiddle: [link] (jsfiddle.net/gerlandoprado/jmb17zwe/1)
    – heromax
    27/05/2015 às 15:11
1

Como o Diego disse a única maneira de trabalhar com o vertical-align é usando table e table-cell. Caso você queira mesmo utilizar, tente fazer dessa forma.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .