-1

Estou tentando alinhar a caixa no centro da tela, mas parece que está alinhando errado mesmo eu colocando 50% de top e 50% de left.

css

#conteudo{
    position:fixed;
    top:50%;
    left:50%;
    border:2px #ccc solid;
    width:350px;
    height:auto;
}
#conteudo table tr td input[type=text],
#conteudo table tr td input[type=password]
{
    width:100%;
}
#conteudo table tr td {
 text-align:right;   
}

html

<div id="conteudo">
    <table border='0' width='100%' cellspacing='20'>
        <tr>
            <td><input type='text' name='email' placeholder='Digite o email'></td>
        </tr>
        <tr>
            <td><input type='password' name='senha' placeholder='Digite a senha'></td>
        </tr>
         <tr>
            <td><input type='submit' name='entrar' value="Entrar"></td>
        </tr>
    </table>    
</div>

Exemplo no jsfiddle

0

1 Resposta 1

2

O CSS não usa o centro do objeto como referência para o posicionamento, mas sim as extremidades, portanto, o que ficará no centro depois deste código, será o canto esquerdo superior do objeto.

Para posicionar no centro defina largura e altura com tamanhos absolutos e uma margem negativa com a metade deste tamanho, exemplo:

#conteudo {
      width:350px; // largura fixa
      height:180px; // altura fixa
      margin-top:-90px; // margem top com metade da altura
      margin-left:-175px; // margem left com metade da altura
      border:2px #ccc solid;
      position:absolute;
      top:50%;
      left:50%;
}

Exemplo: JSFiddle

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