29 de ago. de 2014

Alinhamento Vertical Absoluto usando CSS Cross Browser


Sempre perco tempo procurando resolver o problema de alinhamento de conteúdo na vertical e que seja cross browser de conteúdo dentro de DIV.



Depois de testar vários métodos, o modo mais simples de alinhar conteúdo na vertical foi criando dois DIVs, um DIV externo usando a propriedade display:table e um segundo DIV usando o display:table-cell com a propriedade vertical-align:middle.

Espero que seja útil para mais pessoas!

 <style>  
   .ContainerExt {  
     display: table;  
     width: 330px;  
     height: 180px;  
     background-color: #333333;  
     overflow: hidden;  
   }  
   .ContainerExt:hover {  
     background-color: #000000;  
   }  
   .ContainerExt .ContainerInt {  
     display: table-cell;  
     margin: 0 auto;  
     text-align: center;  
     vertical-align: middle;  
     width: 100%;  
   }  
 </style>  
 <div class="ContainerExt">  
   <div class="ContainerInt">  
     <div class="boxQualquer">  
       Conteúdo Centralizado  
       <br />Multi-linha.  
     </div>  
   </div>  
 </div>  


Fonte: Andy Howard

Nenhum comentário:

Postar um comentário