Ir para conteúdo

Arquivado

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

Monkey D. Luffy

Alinhamento de Divs no centro

Recommended Posts

Boa noite pessoal, tenho o seguinte código que me gera dentro de uma div outras divs.... de acordo com o que existe no banco e dados e o código é o seguinte

 

 

if ($db->rows >= 1){
        $album_evento = $db->data;
        echo '<center><div id="containerAlbum">';
        foreach ($album_evento as $res_album_evento)
        {
         $c = (object) $res_album_evento;    
        
        
         ?>
         <div id="alinhaAlbum">
         <div id="eventosAlbum"><a href="fotosEventos.php?album=<?=$c->id_album_evento?>"><img src="miniaturasAlbuns/<?=$c->miniatura_album_evento?>"/></div>
             <div id="informacoesAlbum">
                 <p><span><?=$c->nome_album_evento?></span></p>
                   <p><b><span>Data: <?= date('d/m/Y', strtotime($c->data_album_evento))?></span></b></p></a>
             </div>
         </div>
         <?php    
        
         }
    
      echo '</div></center>';
    }
}

 

 

o que eu quero é deixar as divs geradas dentro da outra div ao centro..... e o código css que estou usando para alinhar as divs é esse

 

 

 

#containerAlbum{
width:80%;

}

#alinhaAlbum{
float:left;
width:150px;
margin-left:10px;
margin-bottom:10px;
margin-right:0;
height:170px;

}

#eventosAlbum{
float:left;
width:150px;
height:auto;
border:solid 3px #000000;
border-radius:5px;

}

#alinhaAlbum a{
text-decoration:none;
color:#069;

}

#informacoesAlbum{
width:150px;
font-size:10px;
color:#069;
font-weight:bold;
text-align:center;
height:auto;
}

 

pois bem... eu uso o float:left para deixar uma div ao lado da outra e quando tiver quebra de pagina ela continuar em baixo bom fica tudo certo menos a parte das divs de dentro ficarem alinhadas ao centro pois quando eu mudo de resolução ai inves de mostrar 3 divs por linha mostra apenas 2 e ai ela vem mais para a esquerda =/ como resolvo isso? obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não sei se entendi bem mas veja se é isso.

#eventosAlbum{ float:left; width:150px; height:auto; border:solid 3px #000000; border-radius:5px; }

pq se vocÊ que alinhar uma div ao centro da div pai vc tem que tirar o float left e colocar as margens automáticas tipo

float:none;
margin-right: auto;
margin-left: auto;

 

espero ter ajudado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não cara pois se eu fizer isso as divs filha ficaram uma em baixo da outra e eu terei varias de acordo com o banco de dados exemplo

 

quero assim no centro

div1 div2 div3

div4 div5 div6

 

 

se eu fizer isso fica

 

div1

div2

assim por diante

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não entendi nada, se ainda não resolveu desenha em um editor de imagens como você quer que fique os boxes em sua pagina que eu resolvo para você!

Compartilhar este post


Link para o post
Compartilhar em outros sites

certo mais a onde? ja tentei por isso cara :/ onde devo estar fazendo errado?? viu o meu código?



deu certo em partes, ele alinha ao centro porem ele não joga uma div ao lado da outra e sim uma em baixo da outra... preciso que ele vai jogando uma do lado da outra entende?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu entendi o seu problema da seguinte forma, você quer alinhar o conteúdo do seu banco de dados dentro de divs que vão aumentar com os registros, se for isso presta atenção no código que escrevi abaixo.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{padding:0;margin:0 auto;}
body, html{}
#divprincipal{width:462px;height:auto;margin:auto;}
#divprincipal #a{background:red;width:150px;height:170px;float:left;margin-bottom:4px;margin-right:4px;}
</style>
<title>Untitled Document</title>
</head>


<body>
<div id="divprincipal">
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
</div>
</body>
</html>

 

Eu alinhei a div principal no centro, somei a largura da div a três vezes mais o valor que declarei do margin-right e declarei na largura da div principal, declarei a propriedade auto na altura dessa forma ela aumenta com o conteúdo! O meu objetivo foi fazer com que sempre que eu inserir outra div dentro da principal ela ficar alinhada corretamente.

 

 

Para entender melhor basta copiar o código e inserir varias vezes a div a.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Seria sensato colocar class="a" ao invés de id="a". Porque? Veja

 


<body>
<div id="divprincipal">
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
</div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Seria sensato colocar class="a" ao invés de id="a". Porque? Veja

 

 

Isso foi apenas um exemplo que eu dei no caso do meu código não trás nenhuma complicação porem se ele for utilizar no layout dele div a varias vezes eu recomendo ele criar classes. Abraço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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