Tabela dentro de div

[Vinícius Franke 0]

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

[- KbeçãO - 0]

so com html você faz isso...

 

<div class="container" align="center"> <!--acrescente o "align="center" " aqui -->
  <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>

[Vinícius Franke 0]

so com html você faz isso...

 

<div class="container" align="center"> <!--acrescente o "align="center" " aqui -->
  <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 align=center só centraliza horizontalmente, não é?

[- KbeçãO - 0]

sim.......

neste caso, acrescente log a frente o

valign="midle"

 

agora n sei se esse codigo conflitara com o css...

[Vinícius Franke 0]

sim.......

neste caso, acrescente log a frente o

valign="midle"

 

agora n sei se esse codigo conflitara com o css...

 

Então, já havia tentando com o valign, sem sucesso! =/

Apaguei todas as propriedades de posicionamento dos elementos no css para não dar conflito, sem sucesso também.

[Evandro Oliveira 331]

Estilizando com tabelas fica difícil mesmo.