1

Bom, tenho o código abaixo e tenho uma dúvida:

inserir a descrição da imagem aqui

Código

.um {
  background-color:#000;
  width:600px;
  height:280px;
  margin:0 auto; /*centralizando horizontalmente esta div*/
}

.dois {		
  background-color:#CCC;
  width:300px;
  height:240px;	
  margin:0 auto; /*centralizando horizontalmente esta div*/
  line-height:240px;
  vertical-align:middle;
}
<div class="um">

  <div class="dois">

    <div style="border:red 1px solid;">Teste 1!</div>
    <div style="border:red 1px solid;">Teste 2!</div>

  </div>

</div>

As div's filhas da div.dois estão tendo uma altura igual ao line-height da div.dois e não consigo centralizar verticalmente a div.dois no centro da div.um.

1
  • 1
    Não entendi muito bem o que você quer que aconteça! Poderia explicar melhor.
    – Igor Mello
    Commented 18/04/2016 às 13:32

2 Respostas 2

2

Vou explicar os primeiros problemas, primeiro vertical-align é usado para elemento irmãos e que sejam inline ou inline-* (tipo texto), div por padrão são block o que é diferente do "tipo texto".

Ou seja você aplicou vertical-align esperando afetar objetos block e que são pai e filho e não irmãos, uma maneira de usar o vertical-align seria esta (isto não é solução é apenas pra explicar o vertical-align):

.irmao-1 {
    background: #fc0;
    height: 160px;
}

.irmao-2 {
    background: #ccc;
    height: 240px;
}

.irmao-1, .irmao-2 {
    display: inline-block;
    vertical-align: middle;
}
<div class="irmao-1">
  Irmão 1
</div>
<div class="irmao-2">
  Irmão 2
</div>

Outra coisa que parece que talvez esteja confundindo é o termo background, o background só afeta o elemento em si, cada elemento vai ter o seu proprio background e a propriedade background nunca vai vazar o elemento.

Uma coisa, você não precisa "fixar" a altura de todos elementos, você poderia usar padding por exemplo:

.pai {
   background-color: #000;
   padding-top: 20px;
   padding-bottom: 20px;
}

.filho {
   background-color: #ccc;
   width:300px;
   height: 240px;
}
<div class="pai">
    <div class="filho">
       oi
    </div>
</div>

A soma do height: 240px com o padding-top: 20px e padding-bottom: 20px vai fazer o elemento pai ter 280px

Um exemplo com duas divs:

.pai {
   background-color: #000;
   padding-top: 20px;
   padding-bottom: 20px;
}

.filho-1 {
   margin: 0 auto; /*centraliza horizontal*/
   background-color: #ccc;
   width:300px;
   height: 240px;
}

.filho-2 {
   margin: 0 auto; /*centraliza horizontal*/
   background-color: #fc0;
   width:300px;
   height: 240px;
}
<div class="pai">
    <div class="filho-1">
       oi
    </div>
    <div class="filho-2">
       oi
    </div>
</div>

8
  • Obrigado pela resposta. Talvez eu não tenha sido bem objetivo na pergunta. Tenho as div's pai e filho. A div pai tem 280px de altura e a div filho tem 240px de altura. A div filho tem um background-color e o objetivo é que a div filho tenha seu conteúdo centralizado verticalmente e horizontalmente. Mas que a div filho (toda, incluindo seu background) fique alinhada em relação ao pai horizontalmente e verticalmente. Vou reler sua resposta com mais atenção mas se puder adicionar à resposta um exemplo desse tipo ficaria agradecido Commented 18/04/2016 às 13:55
  • @CarlosRocha a minha resposta dá uma breve solução sobre isso usando o padding, já que a altura é fixa, veja que o padding-top e padding-bottom são de 20px no elemento pai, se o filho tem 240px então o pai vai totalizar 280px, teste por favor.
    – Syzoth
    Commented 18/04/2016 às 13:58
  • @CarlosRocha por favor leia a parte que escrevei isto na resposta: Uma coisa, você não precisa "fixar" a altura de todos elementos, você poderia usar padding por exemplo e veja o exemplo, eu editei pra ficar mais claro.
    – Syzoth
    Commented 18/04/2016 às 14:10
  • 1
    1+ ótima explicação e organização parabéns pela resposta Commented 18/04/2016 às 14:45
  • 1
    Sim, agora sim. O problema era mai com postion do que propriamente dito com valign. Obrigado Commented 18/04/2016 às 15:45
1

Seu "background" da div pai não acompanha as div's filhas pelo fato de você ter uma altura fixa nela, no caso o height:240px; tire ela e acompanha-rá.

E para alinha horizontalmente os elementos filhos basta colocar nelas um margin: 0 auto;!

#pai {
  background-color:#000;
  width:600px;
  line-height:280px;
  text-align:center;      
}

.filho {
  margin: 0 auto;
  background-color:#CCC;
  width:300px;
  height:240px;   
}
<div id="pai">

  <div class="filho">

    teste 2!

  </div>

  <div class="filho">

    teste 3!

  </div>

</div>

Agora se realmente tenha que fixar uma altura no elemento pai, não tem como o background acompanhar os filhos.

14
  • No último exemplo, como conseguir fazer com que os dois filhos fiquem um ao lado do outro usando float: left e float:right e o fundo do pai acompanhar? Commented 19/04/2016 às 10:25
  • @CarlosRocha É isto que está querendo fazer? Olha aqui
    – Igor Mello
    Commented 19/04/2016 às 12:31
  • Sim. Agora um conselho: Consegui arrumar de uma outra forma. Adicionei overflow: auto à (no meu caso) div 'um'. E o background acompanhou bacana. Qual jeito é mais correto? O que aqui demonstrou ou usando overflow? Lembrando que no meu caso tenho uma div ainda acima da div um que a engloba.(e só tem ela dentro) Commented 19/04/2016 às 13:30
  • @CarlosRocha Com o overflow: auto; o conteúdo interno da div um vai ficar no seu devido lugar, porém se ultrapassar as dimensões vai criar uma barra de rolagem para visualizar o resto do conteúdo. Não afirmaria um forma correta, depende de qual sua finalidade!
    – Igor Mello
    Commented 19/04/2016 às 13:46
  • Entendi. Fiz esse teste e de fato deu a barra de rolagem. Mas você determinou na div.um line-height:200px; Mas não dá ara determinar seu height pois o conteúdo dos filhos é dinãmico, ou seja, retorno de consulta ao banco podendo ter qualquer altura, Dessa forma, qual a saída? Commented 19/04/2016 às 15:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .