{"id":675,"date":"2020-07-03T20:06:03","date_gmt":"2020-07-03T23:06:03","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=675"},"modified":"2022-12-09T08:45:42","modified_gmt":"2022-12-09T11:45:42","slug":"layout-css-alinhamento-horizontal-e-vertical","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-alinhamento-horizontal-e-vertical\/","title":{"rendered":"Layout CSS – Alinhamento horizontal e vertical"},"content":{"rendered":"

Veja mais sobre Layout CSS – Alinhamento horizontal e vertical ou CSS Layout – Horizontal & Vertical Align.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Elementos de alinhamento centralizado<\/h2>\n

Para centralizar horizontalmente um elemento de bloco (como <div>), use\u00a0margin: auto;<\/code><\/p>\n

Definir a largura do elemento impedir\u00e1 que ele se estique at\u00e9 as bordas do seu cont\u00eainer.<\/p>\n

O elemento ocupar\u00e1 a largura especificada e o espa\u00e7o restante ser\u00e1 dividido igualmente entre as duas margens:<\/p>\n

\"\"<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.center {\r\n  margin: auto;\r\n  width: 60%;\r\n  border: 3px solid #73AD21;\r\n  padding: 10px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Center Align Elements<\/h2>\r\n<p>To horizontally center a block element (like div), use margin: auto;<\/p>\r\n\r\n<div class=\"center\">\r\n  <p><b>Note: <\/b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.<\/p>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Nota: O<\/b>\u00a0alinhamento central n\u00e3o ter\u00e1 efeito se a\u00a0width<\/code>propriedade n\u00e3o estiver configurada (ou configurada para 100%).<\/span><\/p>\n
 <\/p>\n
Alinhar ao centro o texto<\/strong><\/p>\n
Para centralizar apenas o texto dentro de um elemento, use text-align: center;<\/code><\/p>\n
\"\"<\/p>\n
 <\/p>\n
Exemplo<\/strong><\/p>\n
.center {<\/code>
\ntext-align: center;<\/code>
\nborder: 3px solid green;<\/code>
\n}<\/code><\/p>\n
\n
Centralizar uma imagem<\/strong><\/p>\n
Para centralizar uma imagem, defina as margens esquerda e direita para autotransform\u00e1-la em um block<\/code>elemento:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nimg {\r\n  display: block;\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Center an Image<\/h2>\r\n<p>To center an image, set left and right margin to auto, and make it into a block element.<\/p>\r\n\r\n<img src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/estrutura-basica-de-um-documento-css-1-300x169.jpg\" alt=\"Paris\" style=\"width:40%\">\r\n\r\n<\/body>\r\n<\/html><\/pre>\n


<\/center>\n
 <\/p>\n
Alinhar \u00e0 esquerda e \u00e0 direita – usando a posi\u00e7\u00e3o<\/p>\n
Um m\u00e9todo para alinhar elementos \u00e9 usar position: absolute;<\/code>:<\/p>\n
\"\"<\/p>\n
 <\/p>\n
Com o padding<\/p>\n
.center\u00a0{<\/span>
\npadding:<\/span>\u00a070px 0;<\/span><\/span>
\nborder:<\/span>\u00a03px solid green;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n
\"\"<\/p>\n
 <\/p>\n
Para centralizar tudo<\/p>\n
\"\"<\/p>\n
Veja o c\u00f3digo<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.center {\r\n  padding: 70px 0;\r\n  border: 3px solid green;\r\n  text-align: center;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Centering<\/h2>\r\n<p>In this example, we use padding and text-align to center the div element vertically and horizontally:<\/p>\r\n\r\n<div class=\"center\">\r\n  <p>I am vertically and horizontally centered.<\/p>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Centralizar verticalmente – usando a altura da linha<\/strong><\/p>\n
Outro truque \u00e9 usar a line-height<\/code>propriedade com um valor igual \u00e0 height<\/code>propriedade:<\/p>\n
\"\"<\/p>\n
 <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.center {\r\n  line-height: 200px;\r\n  height: 200px;\r\n  border: 3px solid green;\r\n  text-align: center;\r\n}\r\n\r\n.center p {\r\n  line-height: 1.5;\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Centering<\/h2>\r\n<p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:<\/p>\r\n\r\n<div class=\"center\">\r\n  <p>I am vertically and horizontally centered.<\/p>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
ou<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.center { \r\n  height: 200px;\r\n  position: relative;\r\n  border: 3px solid green; \r\n}\r\n\r\n.center p {\r\n  margin: 0;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  -ms-transform: translate(-50%, -50%);\r\n  transform: translate(-50%, -50%);\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Centering<\/h2>\r\n<p>In this example, we use positioning and the transform property to vertically and horizontally center the div element:<\/p>\r\n\r\n<div class=\"center\">\r\n  <p>I am vertically and horizontally centered.<\/p>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Tamb\u00e9m pode se usar o flexbox para o mesmo resultado<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.center {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 200px;\r\n  border: 3px solid green; \r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Flexbox Centering<\/h1>\r\n\r\n<p>A container with both the justify-content and the align-items properties set to <em>center<\/em> will align the item(s) in the center (in both axis).<\/p>\r\n\r\n<div class=\"center\">\r\n  <p>I am vertically and horizontally centered.<\/p>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


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