Ir para conteúdo
Fórum Script Brasil
  • 0

Tabela dentro de div

Vinícius Franke

Perguntado por Vinícius Franke,

 Share

Pergunta

Vinícius Franke

Vinícius Franke

Postado
Postado

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

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0
ºBº

ºBº

Postado
Postado

Amigo não sei se é isso que você quer mas....

está ai

obs:Comente se deu certo ou não. =)

Abrçs !!!

-----------------------------------------------------------------------------------------------------------------

<html>
<head>
<style  type="text/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;
   width: 30%;
   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;    
}
</style>
</head>
<body>
<div class="container">
   <div class="cabecalho_login">Administração do Website</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>
</body>
</html>

Link para o comentário
Compartilhar em outros sites
  • 0
Sexto

Sexto

Postado
Postado

Olá.

Veja, se entendi bem, você quer "centralizar" verticalmente os inputs de texto.

Vi que você aplicou width 50% pra célula do lbl_txt e para o input_txt

o raciocínio está correto, uma linha dividida em duas células meio a meio.

Porém neste caso se trata de uma aparente 'centralização', que na real é um alinhamento de layout

a conta é outra, testei 29% de width pro lbl-txt e 71% pro input_txt lá no CSS.

Era esse o resultado que buscava?

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...