Wanderson Valerio 102 Denunciar post Postado Julho 6, 2012 Olá galera do Imasters, bom dia a todos ... Uma dificuldade que vejo quando estamos começando a dar os primeiros passos, é referente ao alinhamento vertical de textos, para alinharmos um texto horizontalmente, sabemos que podemos fazer isso facilmente com CSS, usando a declaração "text-align: center;", dessa maneira: <style type="text/css"> div.texto { width: 600px; height: 300px; float: left; border: 1px solid #000; text-align: center; } </style> <div class="texto"> <p>Este é o texto que alinhar horizontalmente</p> </div> <!-- /div.texto --> Até ai tudo bem, e como estamos vendo esse tópico para centralizar verticalmente, só acrescemos a declaração "line-height: 300px;", dessa maneira: <style type="text/css"> div.texto { width: 600px; height: 300px; float: left; border: 1px solid #000; text-align: center; line-height: 300px; } </style> <div class="texto"> <p>Este é o texto que alinhar verticalmente</p> </div> <!-- /div.texto --> Note que o "line-height: 300px;" tem o valor da mesma altura da "div" hein, sempre tem que ter o valor da mesma altura da div, caso contrário não ficará totalmente alinhado verticalmente. Abraços!!! Compartilhar este post Link para o post Compartilhar em outros sites
André do Vale 76 Denunciar post Postado Julho 8, 2012 E quando o texto quebrar de linha? :rolleyes: Compartilhar este post Link para o post Compartilhar em outros sites
Wanderson Valerio 102 Denunciar post Postado Julho 9, 2012 Não entendi bem @Andre Campos, pode exemplificar? Compartilhar este post Link para o post Compartilhar em outros sites
André do Vale 76 Denunciar post Postado Julho 9, 2012 Troque o conteúdo do paragrafo por: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper consequat enim, in porta lorem varius a. Nunc in urna aliquet magna aliquet fermentum sed non quam. Suspendisse aliquet, ipsum in euismod varius, lectus nisl interdum lacus, quis egestas diam orci id orci. Phasellus pretium, diam id laoreet suscipit, leo lacus luctus dui, vel aliquet mauris eros eu diam. Duis at enim in purus mattis tincidunt auctor eget sem." E veja o que ocorre. :thumbsup: Para corrigir isso, retire o line-height que se comporta com a altura total do elemento, e utilize um filho como se fosse uma célula de tabela (que aí sim aceita vertical middle): (obs.: IE8+ e demais browsers) <!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" /> <title>Vertical align</title> <style> .teste { width: 900px; height: 900px; background: lightgrey; text-align: center; } .teste p { display: table-cell; height: 900px; vertical-align: middle; } </style> </head> <body> <div class="teste"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper consequat enim, in porta lorem varius a. Nunc in urna aliquet magna aliquet fermentum sed non quam. Suspendisse aliquet, ipsum in euismod varius, lectus nisl interdum lacus, quis egestas diam orci id orci. Phasellus pretium, diam id laoreet suscipit, leo lacus luctus dui, vel aliquet mauris eros eu diam. Duis at enim in purus mattis tincidunt auctor eget sem.</p> </div> </body> </html> Compartilhar este post Link para o post Compartilhar em outros sites
