Alinhar div no centro Verticalmente

[GustavoDose 1]

Boa tarde galera, estou com um problema.

 

Seguinte eu tenho uma div que nao pode ter altura, pois ela pega altura da tabela dependendo de quantas informações ela ira ter , meu problema é que eu preciso que nesta div que pega tamanho dinamicamente o texto fique sempre centralizado independentemente do tamanho dela.

 

 

Segue o código:

 

.div {

1. width: 47%;
2. float: right;
3. overflow: hidden;
4. padding-bottom: 1000em;
5. margin-bottom: -999.5em;

}

.div p{

1. width: 100%;
2. margin: 50% 0 0 0;
3. text-align: center;
4. float: left;
5. font-size: 2em;

}

[Nícolas Luís Huber 14]

Gustavo, estou com dificuldades para entender o que você quer, teria como postar HTML para mais detalhes. Porém eu fiz um exemplo aqui de como centralizar verticalmente e horizontalmente um texto dentro de uma div.

 

Exemplo no JsFiddle

 

Basicamente, é possível centralizar, utilizando a propriedade vertical-align com middle, que dá o mesmo efeito que o atributo HTML de mesmo nome. Todavia está propriedade funcional apenas se colocarmos a propriedade display como table-cell, deixando o elemento com comportamento de um <td>. Quanto ao alinhamento horizontal: a propriedade, já bem conhecida, text-align faz a tarefa, centralizando quando atribuída com o valor center.

 

 

Referência:

http://www.w3schools.com/cssref/pr_class_display.asp

[GustavoDose 1]

Gustavo, estou com dificuldades para entender o que você quer, teria como postar HTML para mais detalhes. Porém eu fiz um exemplo aqui de como centralizar verticalmente e horizontalmente um texto dentro de uma div.

 

Exemplo no JsFiddle

 

Basicamente, é possível centralizar, utilizando a propriedade vertical-align com middle, que dá o mesmo efeito que o atributo HTML de mesmo nome. Todavia está propriedade funcional apenas se colocarmos a propriedade display como table-cell, deixando o elemento com comportamento de um <td>. Quanto ao alinhamento horizontal: a propriedade, já bem conhecida, text-align faz a tarefa, centralizando quando atribuída com o valor center.

 

 

Referência:

http://www.w3schools.com/cssref/pr_class_display.asp

 

Nicolas é basicamente isso cara, mas vc tem altura ai funciona perfeito, como a minha div nao pode ter altura pq tem que pegar automático da tabela ela não fica dessa forma ;/

[xanburzum 169]

A propriedade CSS vertical-align foi introduzida com as CSS-1 (ampliada nas CSS-2 com a introdução do valor <medida CSS>) e admite os seguintes valores:

 

baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit |
<percentagem> | <medida CSS>

 

É uma propriedade que tende a frustar osiniciantes em CSS, que esperam dela um comportamento semelhante ao atributo HTML vertical-align que estão acostumados a usar.

 

Seguindo o raciocínio da dita semelhança, tentam posicionar um texto dentro de um elemento DIV com essa propriedade. E, surpresa!

Exemplo ilustrando o valor middle:

 

CSS:

1.div#falhou {

2.font:12px Arial, Sans-serif;

3.width: 200px;

4.height: 150px;

5.border: 1px solid #c30;

6.background: #ffe;

7.vertical-align: middle;

8.}

HTML:

1.<div id="falhou">

2.Texto no meio da DIV

3.</div>

Que resulta em fracasso (o texto não ‘vai’ para o meio) conforme mostrado a seguir:

Na maioria dos casos este é o primeiro contato que o iniciante tem com esta propriedade e a partir daí esquece e não se preocupa mais com ela pois ‘descobre’ que pode controlar o alinhamento vertical do texto, usando a propriedade line-height assim:

 

CSS:

1.div#sucesso {

2.font:12px Arial, Sans-serif;

3.width: 200px;

4.height: 150px;

5.border: 1px solid #c30;

6.background: #ffe;

7.line-height:150px;

8.}

HTML:

1.<div id="sucesso">

2.Texto no meio da DIV

3.</div>

Que resulta em sucesso (o texto ‘vai’ para o meio) conforme mostrado a seguir:

Texto no meio da DIV

Afinal para que serve esta propriedade?

As Recomendações do W3C dizem que a propriedade vertical-align destina-se a alinhar textos verticalmente que estejam dentro de uma linha ou em uma célula de tabela.

Ops! então se eu declarar para o div#fracasso acima display:table-cell; vai funcionar, pois o DIV terá um comportamento de célula de tabela certo? Sei lá! Vamos experimentar e ver no que dá.

 

CSS:

1.div#seila {

2.width: 200px;

3.height: 150px;

4.border: 1px solid #c30;

5.background: #ffe;

6.vertical-align: middle;

7.display: table-cell;

8.}

HTML:

1.<div id="seila">

2.Texto no meio da DIV

3.</div>

Putz! o IE outra vez! Funcionou para quem tem FireFox, Mozilla, Opera, Netscape e navegadores complacentes com as standards. Se você está com o IE6 ou mais antigo o texto ficou lá em cima. Alguém com a versão beta do IE7 aí? Se sim, pergunto: Funcionou?

Atualização em 19/12/2012: Esse código de centralização não funciona no IE7, mas funciona no IE8+. Se você deseja servir o IE7 terá que usar marcação adicional e regras CSS específicas, como mostrado a seguir:

 

CSS:

01.#container {

02.width: 200px;

03.height: 150px;

04.border: 1px solid #c30;

05.background: #ffe;

06.position: relative;

07.display:table;

08.}

09.#container p {

10.*position: absolute;

11.top: 50%;

12.display: table-cell;

13.vertical-align: middle;

14.}

15.#container span {

16.display:block;

17.*position: relative;

18.top: -50%;

19.}

HTML:

1.<div id="container">

2.<p><span>Texto no meio da DIV</span></p>

3.</div>

Oba! Agora funciona no IE7

Texto no meio da DIV

A propriedade finalmente funcionando

Vamos alinhar textos verticalmente que estejam dentro de uma linha (em uma célula de tabela fica por conta do leitor praticar), como diz a norma.

 

Tomaremos como base para os exemplos o seguinte texto:

Texto com uma palavra diferente dentro dele

Onde iremos controlar o alinhamento vertical de: palavra diferente dentro do texto

 

Exemplo 1 – Definindo um valor positivo de 30 pixel

 

CSS:

1.span.diferente {

2.vertical-align: 30px;

3.}

HTML:

1.<p>

2.<span class="dest">Texto com uma</span>

3.<span class="diferente">

4.<span style="color:#369">palavra diferente</span><span>

5.<span class="dest">dentro dele</span>

6.</p>

 

http://www.maujor.com/blog/2006/07/17/propriedade-vertical-align/