Ir ao conteúdo

Alinhar texto na vertical na div


navegador2

Posts recomendados

Postado

Caros colegas posto este topico porque ja vi esta duvida em muitos locais e eu mesmo tinha até agora, estou criando um site e tentei alinhar o texto na vertical na div rodape que tem Width (largura) de 1000px e height (altura) de 100px.

Achei que usava o vertical align. Mas segundo a w3c não!

Mas pesquisando vi que usa a propriedade css line-height. Basta coloca-la no arquivo css externo na mesma dimensão da altura da div ou seja neste caso height 100px também. No meu caso deu certo.

No arquivo css

#rodape {

height: 100px;

width: 1000px;

text-align:center;

line-height:100px;

}

No arquivo html

<div id="rodape">Copyright @ 2012 -Todos os Direitos Reservados 2012 - </div>

Quem quiser aprofundar mando o link.

Obs. Site muito bom sobre css e outros itens.

Obs. Sempre posto meus topicos com notificação por e-mail, mas nunca chega mensagem avisando nada. Alguém sabe por que? Ja conferi meu e-mail esta atualizado.

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

  • Moderador
Postado

Olá no caso.. se fizer assim também obtém o mesmo resultado:

CSS:


#rodape { height: 100px; width: 1000px; background-color: green;}
#rodape p{ text-align: center; padding-top: 40px;}

HTML:


<div id="rodape">
<p>Copyright @ 2012 -Todos os Direitos Reservados 2012 - </p>
</div>

contudo, o line-height aumenta a espessura da linha, o que as vezes nao é a melhor escolha. é preferível manipular o posicionamento de um elementro dentro de uma div, do que manipular a linha contida na div. pode causar grandes dores de cabeça quando tem outrros elementos dentro da mesma div.. como é o caso de rodapes do sites de compras coletivas.. onde tem muito conteudo separados por outras divs e elementos de paragrafo

abraço

Postado

Caro Dif!

Sim concordo com você! Eu so usei este método porque vi no site do maujor. Também tinho usado um codigo parecido ao que você usou com a tag p, e obtive o mesmo resultado, so mudei porque achei que neste modo estaria mais de acordo com a w3c.

Por exemplo para centralizar uma imagem na horizontal numa div, coloco a propriedade text-align = center. Mas sinceramente não sei se este método esta de acordo com os novos padrões...

Apesar de termos visões diferentes sobre o Dreamwaver, também tento sempre criar pelos novos padrões. Sei que seus conhecimentos sobre programação Web são bem maiores que o meu. Eu tenho muito experiência na área de usabilidade já que tenho 11 anos de experiência com instrutor de informática. Entendo suas posições sobre ele o Dreamwaver Cs5 são corretas, ele realmente adiciona alguns códigos ha mais, mas não acho que chegue aatrapalhar caso a pessoa tenha noção vai retirando aos poucos. Mas é isto ai cada um da sua visão e a soma delas formam espaços legais como este. Naquele comentario sobre o usuario ver via browser eu tinha tido aquele mesmo problema por isto fiz aquela sugestão, que no meu caso resolveu. Antes criava no bloco de notas via html e ficava testando no browser o que demorava bem mais...

  • Moderador
Postado

Ola amigo, rsrs

é disso que eu gosto, discussoes saudaveis assim!

centralizar uma imagem na horizontal numa div, coloco a propriedade text-align = center.

acho que temos um equivoco aqui... nao posicionamos uma imagem com a tag text-align, uma vez que ela é destinada a posiocionamento de textos. de acordo com os padroes da web standard atuais mencionadas pela W3C diz que os atributos devem ser aplicados de acordo com seus elementos destinados, a mesma coisa serve para as tags. como é o caso de table, que é destinado a dados tabulares.

então por exemplo o mais "correto"(entre aspas pois é o mais usado, nao quer dizer que seja apenas este o correto) método de posicionamento de imagens em uma div.. é definido para tag img no css position, e seus atributos de posicionamento ( top, left, right, bottom).

exemplo:

#conteudo img{ position: absolute; top: 50px; left: 50px;}

claro que isso mexeria em todas as imagens dentro da div contudo, neste caso se quiser mexer em cada uma .. aí teria que atribuir uma ID ou CLASS para cada uma que queira atributos diferentes.

Sim, temos visoes diferentes em relaçao ao dreamweaver e nao condeno quem usa, ate porque a IDE usada é de gosto de cada um. mas eu evito ao máximo incentivar o uso dela quando muitos usuarios vem aqui pedindo ajuda.. e eu vendo que eles nao tem dominio sobre o CSS ou HTML.. nao convem usar ele se nao sabe o que esta fazendo justamente porque ele suja o codigo.

sempre incentivo o uso de programas livres e leves.. uma vez que aqui é proibido pirataria ou algo do tipo.. então se eu digo.." use o dreamweaver.. você pode baixa-lo em qualquer blog na internet" eu estaria incitando pirataria.. e isto é errado. se a pessoa quer usar, tudo bem.. desde que ela pague pela ferramenta. por isso incentivo a usar IDE Gratuitas.. nao precisa pagar e atende todos os requisitos e nao sujam o codigo pois o melhor jeito de aprender é escrevendo na unha mesmo.

Nao estamos aqui para discutir que meus conhecimentos sejam melhor que o seus, eu nao sou melhor do que ninguem! apenas estudei, fiz faculdade, me dediquei muito aos estudos e gosto de ajudar todos aqui voluntariamente.. eu desejo sempre passar adiante meus conhecimento.. isso vale pra você, sempre que eu souber alguma coisa que você está com dificuldade, nao hesitarei em te ajudar na maior boa vontade!.

Realmente o site do maujor é um dos melhores, nada melhor do que ele para falar sobre padroes web standard. ele é um dos meus autores favoritos, tenho diversos livros dele. frequento o blog e o site dele. aquele metodo que você postou é um do que podem ser usado sem problemas, mas lembrando daquilo que mencionei.. que pode dar problemas em determinados casos!

abraço meu amigo e continue postando aqui, e passando seus conhecimentos adiante!

Arquivado

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

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

LANÇAMENTO!

eletronica2025-popup.jpg


CLIQUE AQUI E BAIXE AGORA MESMO!