Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

saulo-jitsu

Alinhar verticalmente DIV que tem float

Por , em Desenvolvimento frontend

Recommended Posts

saulo-jitsu    0

saulo-jitsu
Postado

Oi pessoal.

Estou tentando alinha um link no centro de um div mas não estou conseguindo.

Sei que é mais complicado pq o div está com float:left e sei que por isso o o vertical-align:middle não vai funcionar.

Tentei usar um display:table-cell no div, mas mesmo assim não consegui.

Segue o css e o trecho do html.

Obrigado pela ajuda!

 

.grid_12{display:inline;float:left;margin-left:10px;margin-right:10px}
div#center{position:relative;}
div#l1    {position:relative; height:70px;}
div#c1    {margin:0 0 0 150px;}
div#c2    {margin:0 0 0 10px;}
div.box   {border:1px solid #868686; width:150px; height:60px; text-align:center; background-color:#ecfcfc;float:left; position:relative;}

 

       <div id="center" class="grid_12">
           <div id="l1">
               <div id="c1" class="box">
                   <a href="#">Link linha 1 coluna 1</a>
               </div>
               <div id="c2" class="box">
                   <a href="#">Link linha 1 coluna 2</a>
               </div>
               <div id="c2" class="box">
                   <a href="#">Link linha 1 coluna 3</a>
               </div>
               <div id="c2" class="box">
                   <a href="#">Link linha 1 coluna 4</a>
               </div>
           </div>
           <div id="l1">
               <div id="c1" class="box">
                   <a href="#">Link linha 2 coluna 1</a>
               </div>
               <div id="c2" class="box">
                   <a href="#">Link linha 2 coluna 2</a>
               </div>
               <div id="c2" class="box">
                   <a href="#">Link linha 2 coluna 3</a>
               </div>
               <div id="c2" class="box">
                   <a href="#">Link linha 2 coluna 4</a>
               </div>
           </div>
       </div>

 

Saulo Marques

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"
<head>
	<title>teste</title>
	<style type="text/css" media="all">
.valign {
display: inline-block;
height: 100%;
vertical-align: middle;
}
	</style>
</head>
<body>
	<div style="border: 1px solid #000; height: 200px;"><span class="valign"></span>texto</div>
</body>
</html>

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito