{"id":571,"date":"2020-07-03T10:45:01","date_gmt":"2020-07-03T13:45:01","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=571"},"modified":"2022-12-09T08:45:43","modified_gmt":"2022-12-09T11:45:43","slug":"alinhamento-de-texto-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/alinhamento-de-texto-css\/","title":{"rendered":"Texto CSS – Alinhamento de texto CSS"},"content":{"rendered":"

A\u00a0text-align<\/code>propriedade \u00e9 usada para definir o alinhamento horizontal de um texto.<\/p>\n

Um texto pode ser alinhado \u00e0 esquerda ou \u00e0 direita, centralizado ou justificado.<\/p>\n

O exemplo a seguir mostra o texto alinhado ao centro e alinhado \u00e0 esquerda e \u00e0 direita (o alinhamento \u00e0 esquerda \u00e9 o padr\u00e3o se a dire\u00e7\u00e3o do texto for da esquerda para a direita e o alinhamento \u00e0 direita \u00e9 o padr\u00e3o se a dire\u00e7\u00e3o do texto \u00e9 da direita para a esquerda):<\/p>\n

h1 {<\/code>
\ntext-align: center;<\/code>
\n}<\/code><\/p>\n

h2 {<\/code>
\ntext-align: left;<\/code>
\n}<\/code><\/p>\n

h3 {<\/code>
\ntext-align: right;<\/code>
\n}<\/code><\/p>\n

 <\/p>\n

Quando a\u00a0text-align<\/code> propriedade \u00e9 configurada para “justificar”, cada linha \u00e9 esticada para que cada linha tenha largura igual e as margens esquerda e direita s\u00e3o retas (como em revistas e jornais):<\/p>\n

div {<\/code>
\ntext-align: justify;<\/code>
\n}<\/code><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ndiv {\r\n  border: 1px solid black;\r\n  padding: 10px;\r\n  width: 200px;\r\n  height: 200px;\r\n  text-align: justify;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Example text-align: justify;<\/h1>\r\n\r\n<p>The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).<\/p>\r\n\r\n<div>\r\nIn my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\"\"<\/p>\n
Dire\u00e7\u00e3o do texto<\/strong><\/p>\n
As propriedades directione unicode-bidi<\/code> podem ser usadas para alterar a dire\u00e7\u00e3o do texto de um elemento:<\/p>\n
 <\/p>\n
p {<\/code>
\ndirection: rtl;<\/code>
\nunicode-bidi: bidi-override;<\/code>
\n}<\/code><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np.ex1 {\r\n  direction: rtl;\r\n  unicode-bidi: bidi-override;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>This is the default text direction.<\/p>\r\n\r\n<p class=\"ex1\">This is right-to-left text direction.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Alinhamento vertical<\/strong><\/p>\n
A vertical-align<\/code> propriedade define o alinhamento vertical de um elemento.<\/p>\n
Este exemplo demonstra como definir o alinhamento vertical de uma imagem em um texto:<\/p>\n
img.top {\r\n  vertical-align: top;\r\n}\r\n\r\nimg.middle {\r\n  vertical-align: middle;\r\n}\r\n\r\nimg.bottom {\r\n  vertical-align: bottom;\r\n}<\/pre>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nimg.top {\r\n  vertical-align: top;\r\n}\r\n\r\nimg.middle {\r\n  vertical-align: middle;\r\n}\r\n\r\nimg.bottom {\r\n  vertical-align: bottom;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>An <img src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/estrutura-basica-de-um-documento-css-1-300x169.jpg\" alt=\"W3Schools\" width=\"270\" height=\"50\"> image with a default alignment.<\/p><br>\r\n\r\n<p>An <img class=\"top\" src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/estrutura-basica-de-um-documento-css-1-300x169.jpg\" alt=\"W3Schools\" width=\"270\" height=\"50\"> image with a top alignment.<\/p><br>\r\n\r\n<p>An <img class=\"middle\" src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/estrutura-basica-de-um-documento-css-1-300x169.jpg\" alt=\"W3Schools\" width=\"270\" height=\"50\"> image with a middle alignment.<\/p><br>\r\n\r\n<p>An <img class=\"bottom\" src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/estrutura-basica-de-um-documento-css-1-300x169.jpg\" alt=\"W3Schools\" width=\"270\" height=\"50\"> image with a bottom alignment.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n