Alinhamento DIV

vitinho.vitor · Fevereiro 22, 2011

Boa tarde pessoal, tenho um site com algumas DIVs porém descobri que no Internet Explorer e no Firefox as DIVs ficam à esquerda e eu gostaria que ficassem no centro.

Segue CSS:

 .quadrados {
   float: left;
   display: inline;
   width: 32%;
 }

E o HTML:

<div class="quadrados" align="center">
<table border='0' align='left' cellpadding='3' cellspacing='0' style="display:inline;">
<tr>
 <td colspan='7'>
   <img src='images/camping.jpg' alt='Camping' border="0">
   </td>
 </tr>
<?php
$sql = mysql_query("SELECT nome , cidade
FROM camping
WHERE 1 
ORDER BY RAND( ) 
LIMIT 5");

$cont = mysql_num_rows($sql);
$cont = 0;

while ($row = mysql_fetch_array($sql)) {
if ($cont % 2 == 0)
{
$cor = "http://www.tallybaby.com.br/painel/imagens/frank.jpg";
}
else
{
$cor = "http://www.tallybaby.com.br/painel/imagens/frank2.jpg";
}

echo "<tr style='background: url(".$cor.")'>";
echo "<td><b><font color='blue' style='font-size:13px; font-weight:bold;' align='left'><b><a href='camping.php?nome=".$row['nome']."' target='_blank'>".$row['nome']."</b></a></td>";
echo "<td><center><b><font color='forestGreen' style='font-size:14px;'>-</b></center></td>";
echo "<td><b><font color='blue' style='font-size:13px;text-align:right; font-weight:bold;'><b><a href='camping.php?nome=".$row['nome']."' target='_blank'>".$row['cidade']."</b></a></td>";
echo "</tr>";
$cont = $cont + 1;
}

?>
</table>
</div>

<div class="quadrados" align="center">
<table border='0' align='left' cellpadding='3' cellspacing='0' style="display:inline;">
<tr>
 <td colspan='7'>
   <img src='images/camping.jpg' alt='Camping' border="0">
   </td>
 </tr>
<?php
$sql = mysql_query("SELECT nome , cidade
FROM camping
WHERE 1 
ORDER BY RAND( ) 
LIMIT 5");

$cont = mysql_num_rows($sql);
$cont = 0;

while ($row = mysql_fetch_array($sql)) {
if ($cont % 2 == 0)
{
$cor = "http://www.tallybaby.com.br/painel/imagens/frank.jpg";
}
else
{
$cor = "http://www.tallybaby.com.br/painel/imagens/frank2.jpg";
}

echo "<tr style='background: url(".$cor.")'>";
echo "<td><b><font color='blue' style='font-size:13px; font-weight:bold;' align='left'><b><a href='camping.php?nome=".$row['nome']."' target='_blank'>".$row['nome']."</b></a></td>";
echo "<td><center><b><font color='forestGreen' style='font-size:14px;'>-</b></center></td>";
echo "<td><b><font color='blue' style='font-size:13px;text-align:right; font-weight:bold;'><b><a href='camping.php?nome=".$row['nome']."' target='_blank'>".$row['cidade']."</b></a></td>";
echo "</tr>";
$cont = $cont + 1;
}

?>
</table>
</div>

<div class="quadrados" align="center">
<table border='0' align='left' cellpadding='3' cellspacing='0' style="display:inline;">
<tr>
 <td colspan='7'>
   <img src='images/camping.jpg' alt='Camping' border="0">
   </td>
 </tr>
<?php
$sql = mysql_query("SELECT nome , cidade
FROM camping
WHERE 1 
ORDER BY RAND( ) 
LIMIT 5");

$cont = mysql_num_rows($sql);
$cont = 0;

while ($row = mysql_fetch_array($sql)) {
if ($cont % 2 == 0)
{
$cor = "http://www.tallybaby.com.br/painel/imagens/frank.jpg";
}
else
{
$cor = "http://www.tallybaby.com.br/painel/imagens/frank2.jpg";
}

echo "<tr style='background: url(".$cor.")'>";
echo "<td><b><font color='blue' style='font-size:13px; font-weight:bold;' align='left'><b><a href='camping.php?nome=".$row['nome']."' target='_blank'>".$row['nome']."</b></a></td>";
echo "<td><center><b><font color='forestGreen' style='font-size:14px;'>-</b></center></td>";
echo "<td><b><font color='blue' style='font-size:13px;text-align:right; font-weight:bold;'><b><a href='camping.php?nome=".$row['nome']."' target='_blank'>".$row['cidade']."</b></a></td>";
echo "</tr>";
$cont = $cont + 1;
}

?>
</table>
</div>

No Chrome essas 3 DIVs ficam uma ao lado da outra alinhadas no centro porém nos outros navegadores não.

Desde já agradeço,

Vitor

angelorubin · Fevereiro 23, 2011

Boa tarde,

Creio que isso lhe ajude.

* {
padding:0;
margin:0;
}
.quadrados {
width:99%;
height:auto;
min-height:450px;
margin:2px auto;
}

vitinho.vitor · Fevereiro 23, 2011

Boa tarde,

na verdade essa div "quadrados" se repete 3 vezes então acho que teria que ter um tamanho de 32%. O que mais teria que alterar para ficar correto?

Obrigado

angelorubin · Fevereiro 23, 2011

Boa noite,

As Div´s ficam lado a lado ou uma sobre a outra?

vitinho.vitor · Fevereiro 23, 2011

Uma ao lado da outra.

Segue link:

http://www.acampi.com.br

Obrigado

Vinicius Weber · Fevereiro 24, 2011

Faz o seguinte, crie uma div que vai alinhas estas divs sacou?

e acre4centa ela no meio destas div entendeu?

.meio_pagina{margin:0 auto;}

.quadrados {
   float: left;
   display: inline;
   width: 32%;
 }

<div class="meio_pagina">

<div class="meio_quadrados"></div>
<div class="meio_quadrados"></div>
<div class="meio_quadrados"></div>

</div>

explicando: margin:0(Define que a margin dele top e bottom é 0) auto(Alinha ao centro da pagina horizontalmente)

vitinho.vitor · Fevereiro 25, 2011

Boa tarde, criei essa outra div, acrescentei text-align: center; porém não obtive sucesso em colocar essas 3 divs quadrados para o centro.

Segue HTML:

<div class="meio_quadrados">
  <div class="quadrados">1</div>
  <div class="quadrados">2</div>
  <div class="quadrados">3</div>
</div>

E o CSS:

 .meio_quadrados {
   margin:0 auto;
   text-align: center;
 }

 .quadrados {
   float: left;
   display: inline;
   width: 32%;
 }

Desde já agradeço,

Vitor

Malan Dev · Fevereiro 26, 2011

Boa tarde, criei essa outra div, acrescentei text-align: center; porém não obtive sucesso em colocar essas 3 divs quadrados para o centro.

Segue HTML:
<div class="meio_quadrados">
  <div class="quadrados">1</div>
  <div class="quadrados">2</div>
  <div class="quadrados">3</div>
</div>
E o CSS:
 .meio_quadrados {
   margin:0 auto;
   text-align: center;
 }

 .quadrados {
   float: left;
   display: inline;
   width: 32%;
 }
Desde já agradeço,

Vitor

tenta definir um width para a class meio.quadrados tipo

.meio_quadrados {
   margin:0 auto;
   text-align: center;
   width:990px;
 }

Paulo de Tarso F. M. · Fevereiro 28, 2011

Como as <div>'s internas são display:block, o text-align:center não vai funcionar mesmo. Para conseguir isso, utilizando o mesmo HTML de exemplo:

<div class="meio_quadrados">
  <div class="quadrados">1</div>
  <div class="quadrados">2</div>
  <div class="quadrados">3</div>
</div>

A div.meio_quadrados deverá ter uma largura definida, como nosso amigo Malan Dev mencionou. Se você quer que as internas tenham 32% de largura, então seu CSS deverá ficar assim:

.meio_quadrados {
   width:96%; // <== Soma da largura das três divs internas
   margin:0 auto;
}

div.quadrados {
   float: left;
   display: inline;
   width: 32%;
}

Ou você trabalha com uma medida fixa, como no exemplo do Melan Dev, tanto faz. O text-align só funciona com elementos inline ou texto puro, por isso ele não vai funcionar.

Obs.: Quando aplicamos float em um elemento, independentemente da definição do display, o elemento se comporta como block. Veja que você declarou display:inline na div.quadrados, mas ela é ignorada quando utiliza-se o float. Eu deixei no meu exemplo porque com ele podemos corrigir alguns bugs nos IEs... :assobiando: Mas isso é um outro assunto...

:joia:

Arquivado

Alinhamento DIV

Recommended Posts

vitinho.vitor 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

vitinho.vitor 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

vitinho.vitor 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vinicius Weber 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

vitinho.vitor 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Malan Dev 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo de Tarso F. M. 24

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

Fóruns

Tempo Real

Informação importante