Alinhar elementos verticalmente \u00e9 uma tarefa comum no CSS, mas que pode gerar algumas d\u00favidas.<\/p>\n
Neste tutorial, vamos ver as melhores maneiras de alinhar texto verticalmente com CSS<\/strong>, com exemplos pr\u00e1ticos.<\/p>\n Em CSS<\/a> existem alguns valores e propriedades que permitem o alinhamento vertical de elementos. Os principais s\u00e3o:<\/p>\n Agora que conhecemos as sintaxes, veja exemplos pr\u00e1ticos de como usar cada uma dessas t\u00e9cnicas.<\/p>\n Uma das maneiras mais comuns de alinhar texto verticalmente \u00e9 ao configurar o alinhamento ao elemento pai.<\/p>\n HTML<\/strong>:<\/p>\n CSS:<\/strong><\/p>\n Nesse exemplo, definimos um container com altura fixa e usamos as propriedades display: flex<\/em> e align-items: center.<\/em> Isso far\u00e1 com que o texto fique centralizado verticalmente no meio do container.<\/strong><\/p>\n Tamb\u00e9m \u00e9 poss\u00edvel alinhar o texto verticalmente ao definir propriedades no pr\u00f3prio elemento de texto.<\/p>\n HTML<\/strong>:<\/p>\n CSS:<\/strong><\/p>\n Nesse exemplo, definimos um container com altura fixa e usamos as propriedades display: flex<\/em> e align-items: center.<\/em> Isso far\u00e1 com que o texto fique centralizado verticalmente no meio do container.<\/strong><\/p>\n Aqui, definimos uma altura fixa para o elemento <p><\/em> e um line-height<\/em> com o mesmo valor. Isso far\u00e1 com que o texto fique centralizado verticalmente em rela\u00e7\u00e3o \u00e0 altura do elemento.<\/strong><\/p>\n Para centralizar um elemento tanto na vertical quanto na horizontal, podemos combinar algumas das t\u00e9cnicas acima.<\/p>\n Com flex, podemos centralizar facilmente ao definir o alinhamento vertical com align-items<\/em> e o alinhamento horizontal com justify-content<\/em>.<\/p>\n HTML<\/strong>:<\/p>\n CSS:<\/strong><\/p>\n Com grid tamb\u00e9m fica f\u00e1cil centralizar com as mesmas propriedades do flex.<\/p>\n HTML<\/strong>:<\/p>\n CSS:<\/strong><\/p>\n Outra op\u00e7\u00e3o \u00e9 usar posicionamento absoluto junto com transform.<\/p>\n HTML<\/strong>:<\/p>\n CSS:<\/strong><\/p>\n Aqui, posicionamos o texto com top: 50%<\/em> e left: 50%<\/em> e depois usamos um transform negativo de metade do tamanho para centralizar perfeitamente.<\/p>\n Alinhar o texto na vertical \u00e9 importante para:<\/p>\n Al\u00e9m disso, muitos layouts e componentes comuns exigem alinhamento vertical, como menus, hero sections, cards, entre outros.<\/p>\n \n \t\t\t\t<\/div>\r\n \t\t\t<\/div>\r\n \t\t<\/div>\r\n \t\t\n As propriedades modernas de alinhamento vertical, como flex e grid, s\u00e3o compat\u00edveis com a maioria dos navegadores atuais:<\/p>\n J\u00e1 as propriedades mais antigas, como vertical-align<\/em> e line-height<\/em>, t\u00eam suporte em todos os navegadores.<\/p>\n T\u00e9cnicas que envolvem posicionamento absoluto e transforma\u00e7\u00f5es tamb\u00e9m funcionam bem nos navegadores modernos.<\/p>\n Esperamos que este guia tenha te ajudado a entender como alinhar texto verticalmente com CSS!<\/p>\n Para aprender mais sobre desenvolvimento web, confira tamb\u00e9m nosso conte\u00fado sobre como criar um site<\/a>.<\/p>\nSintaxe para alinhar texto verticalmente em CSS<\/h2>\n
\n
Como alinhar o texto verticalmente em CSS?<\/h2>\n
No elemento pai<\/h3>\n
Exemplo<\/h4>\n
<div class=\"container\"> <p>Meu texto alinhado verticalmente no meio.<\/p> <\/div><\/pre>\n
.container {\r\nheight: 200px;\r\ndisplay: flex; \r\nalign-items: center;\r\n}<\/pre>\nNo pr\u00f3prio elemento<\/h3>\n
Exemplo<\/h4>\n
<p class=\"texto-centralizado\">Texto alinhado verticalmente no meio.<\/p><\/pre>\n
.texto-centralizado {\r\nheight: 200px;\r\nline-height: 200px;\r\n}<\/pre>\nComo centralizar na vertical e na horizontal?<\/h2>\n
Display flex<\/h3>\n
Exemplo<\/h4>\n
<div class=\"container\">\r\n<p>Texto centralizado vertical e horizontalmente.<\/p>\r\n<\/div><\/pre>\n
.container {\r\nheight: 200px;\r\ndisplay: flex;\r\nalign-items: center;\r\njustify-content: center; \r\n}<\/pre>\nDisplay Grid<\/h3>\n
Exemplo<\/h4>\n
<div class=\"container\">\r\n<p>Texto centralizado com grid.<\/p>\r\n<\/div><\/pre>\n
.container {\r\nheight: 200px;\r\ndisplay: grid;\r\nalign-items: center;\r\njustify-content: center;\r\n}<\/pre>\nPosition Absolute<\/h3>\n
Exemplo<\/h4>\n
<div class=\"container\">\r\n<p>Texto com posicionamento absoluto.<\/p>\r\n<\/div><\/pre>\n
.container {\r\nheight: 200px;\r\nposition: relative;\r\n}\r\n.container p {\r\nposition: absolute;\r\ntop: 50%;\r\nleft: 50%;\r\ntransform: translate(-50%, -50%);\r\n}<\/pre>\nPor que usar o texto verticalmente no CSS?<\/h2>\n \t\t
\n
\u00c9 compat\u00edvel com quais navegadores?<\/h2>\n
\n