Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal, estou apanhando um pouco pra centralizar verticalmente uma tabela dentro de uma div. Podem me ajudar?
Este é meu HTML:
<div class="container">
<div class="cabecalho_login">Administração do Website de Mega Piscinas</div>
<div class="box_login" align="center"> <!-- ESTA É A DIV ONDE A TABELA ESTÁ INSERIDA -->
<table> <!-- ESTA É A TABELA QUE QUERO CENTRALIZAR VERTICALMENTE -->
<tr>
<td class="lbl_txt">Usuário:</td>
<td><input type="text" class="input_txt"></td>
</tr>
<tr>
<td class="lbl_txt">Senha:</td>
<td><input type="password" class="input_txt"></td>
</tr>
<tr>
<td colspan="2" align="center"><a href="#" class="botao">Login</a></td>
<tr>
</table>
</div>
</div>
Este é meu CSS:
.cabecalho_login{
width: 400px;
height: 30px;
line-height: 30px;
border: 1px solid #BBBDBF;
font-size:12px; font-weight: bold; color: #000000;
text-align: center;
border-radius: 7px 7px 0px 0px; /*bordas arredondadas para quando o CSS3 estiver valendo */
-webkit-border-radius: 7px 7px 0px 0px; /*bordas arredondadas para Chrome e Safari*/
-moz-border-radius: 7px 7px 0px 0px; /*bordas arredondadas para Firefox*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BBBDBF), to(#E5E6E7)); /* background degrade para webkit (Chrome, Safari) */
background: -moz-linear-gradient(top,#BBBDBF, #E5E6E7); /* background degrade para Firefox */
filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#BBBDBF', endColorstr='#E5E6E7')"; /* background degrade para IE */
}
.box_login{
width: 400px;
border: 1px solid #BBBDBF;
border-radius: 0px 0px 7px 7px; /*bordas arredondadas para quando o CSS3 estiver valendo */
-webkit-border-radius: 0px 0px 7px 7px; /*bordas arredondadas para Chrome e Safari*/
-moz-border-radius: 0px 0px 7px 7px; /*bordas arredondadas para Firefox*/
border-top: none;
height: 170px;
}
.box_login table{
width: 100%;
background: red;
}
.lbl_txt{
font-size:12px; font-weight: bold; color: #4F4F4F;
height: 20px;
width: 50%;
text-align: right;
}
.input_txt{
font-size:12px; font-weight: normal; color: #4F4F4F;
border-radius: 4px 4px 4px 4px; /*bordas arredondadas para quando o CSS3 estiver valendo */
-webkit-border-radius: 4px 4px 4px 4px; /*bordas arredondadas para Chrome e Safari*/
-moz-border-radius: 4px 4px 4px 4px; /*bordas arredondadas para Firefox*/
border: 1px solid #BBBDBF;
height: 20px;
}
.box_login table .input_txt{
width: 150px;
}
.container{
position: absolute;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
margin:-100px 0 0 -200px;
}Carregando comentários...