Ir para conteúdo

POWERED BY:

Arquivado

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

Bill

Alinhamento de Div no centro da pagina uma do lado da outra

Por , em Desenvolvimento frontend

Recommended Posts

Bill    0

Bill
Postado

Pessoal estou com uma duvida aqui com css, creio que não deve ser nova aqui no fórum mas procurei e até o momento não achei uma solução definitiva; eu tenho uma pagina que faz select no banco de dados, e exibe os resultados em divs, em um loop, vamos supor que tenha 10 registros no banco, ele exibe 10 divs com cada registro, até ai tudo bem, não é uma duvida referente ao php, bom, um exemplo de como ficaria o css, uma div principal(pai) e as divs com float left, meu codigo esta assim:

 



<html>


<head>


<title>Documento sem título</title>




<style type="text/css">


#envolve {


 width: auto;


 border:1px solid #093;


 height:50px;


 margin:auto;


}


 


#div_1 {


 width: 80px;


 height: 50px;


 background-color: #333399;


 float: left;


 text-align: center;


 color: #FFF;


 margin-left:5px;


  


} 


  


 


 


#clear {


 clear:both; 


}


</style>


</head>


 


<body>


<div  align="center" id="envolve">


  


<div id="div_1">


DIV 1</div>


 


<div id="div_1">


DIV 2</div>


 


<div id="div_1">


DIV 2</div>


 


</div>


<div class="clear">


</div>


</body>


</html>




 


então se puxar bastante registros do banco de dados, beleza, fica tudo alinhado, mas o problema é quando só tem um registro, ele fica alinhado do lado esquerdo(float) e eu queria que ficasse alinhado ao centro, se tiver um só registro, e se tiver mais de um, por exemplo uns 2, ficar do lado da outra, e não embaixo quando joga tira o float e coloca um align="center" com margin auto.


não quero que fique assim:


1.jpg


quero que fique assim, alinhado ao centro, uma div do lado da outra e não abaixo:


2.jpg


aqui é só um exemplo, pois o numero de registros varia, pois puxa os mesmos do banco de dados.


Se alguém puder me ajudar fico extremamente agradecido.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
					
					
					






					
				
					
					
					







	

	

		

			
Thiago Jourdan
			  

	
		
	
			 3
	
		
	

		

		

			


	
		Thiago Jourdan
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Olá. ;)


 


Consegui resolver seu problema. O código segue abaixo, mas vou explicar algumas coisas:


1º Não sei se você vai gostar, mas usei o método das tabelas pra alinhar as divs, que seriam nossas duas opções, sendo as tabelas a mais "robusta";


2º retirei os floats pra que eles pudessem se alinhar também à direita;


3º retirei as margens automáticas e coloquei o método das porcentagens, que no caso elas vão se alinhar de acordo com o tamanho das outras.


4º a div do meio (div_2) foi a única que precisou que a tag <td> ficasse com o width igual a 1px, porque se o seu conteúdo for maior, ele vai se ajustar (vantagem das tabelas), porém interfere na porcentagem de tamanho das outras, mas sempre ficando em tom de igualdade.


 


O código segue abaixo:


 


<html>


<head>


<title>Documento sem título</title>


<style type="text/css">


#envolve{


border:1px solid #093;


height:56px;


}


#div_1{


width:80px;


height:50px;


background-color:#339;


text-align:center;


color:#FFF;


}


#clear{


clear:both; 


}


</style>


</head>


<body>


<div id="envolve">


<table border=0 width="100%">


<tr>


<td align="right">


<div id="div_1">DIV 1</div>


</td>


<td width="1px" align="center">


<div id="div_1">DIV 2</div>


</td>


<td align="left">


<div id="div_1">DIV 3</div>


</td>


</tr>


</table>


</div>


<div id="clear">Colocando aqui só pra aparecer e você ver como fica.</div>


</body>


</html>


 


Qualquer coisa, não hesite em perguntar, beleza? ;) Abraço.


Thiago Jourdan.




			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
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