{"id":285,"date":"2012-10-24T09:06:10","date_gmt":"2012-10-24T09:06:10","guid":{"rendered":"http:\/\/pablodelcerro.es\/blog\/?p=285"},"modified":"2014-10-07T09:09:05","modified_gmt":"2014-10-07T09:09:05","slug":"centrar-div-horizontal-con-estilos-css","status":"publish","type":"post","link":"http:\/\/pablodelcerro.es\/blog\/2012\/10\/24\/centrar-div-horizontal-con-estilos-css\/","title":{"rendered":"Centrar DIV horizontal con estilos CSS"},"content":{"rendered":"<p>Es com\u00fan querer <strong>centrar nuestra p\u00e1gina web horizontalmente<\/strong>, para que no quede toda alineada a la izquierda dejando un enorme espacio vac\u00edo en el lado derecho, cada d\u00eda m\u00e1s notable por los monitores panor\u00e1micos de cada vez m\u00e1s pulgadas.<\/p>\n<p>Ocurre que no existe ning\u00fan atributo que haga alinearse a los elementos al centro. Podremos centrar texto, s\u00ed, pero no una caja con la facilidad con la que podemos hacerlo a la izquierda o la derecha.<\/p>\n<p>Para ello, se utiliza un truco que luego pasaremos a explicar, os muestro un fragmento de c\u00f3digo de una DIV y su correspondiente estilo:<\/p>\n<pre>&lt;style type=\"text\/css\"&gt;\r\n  .centrada {margin: 0 auto; width: 800px;}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div class=\"centrada\"&gt;\r\n    &lt;p&gt;Este contenido est\u00e1 en una DIV centrada&lt;\/p&gt;\r\n  &lt;\/div&gt;<\/pre>\n<p>Bien, la explicaci\u00f3n es sencilla.\u00a0Como podemos ver en el ejemplo, nuestra capa tiene como m\u00ednimo dos elementos obligatorios: \u00ab<strong>margin<\/strong>\u00bb (margen) y \u00ab<strong>width<\/strong>\u00bb (anchura).<\/p>\n<p>El motivo no es otro que obligar a nuestra DIV a que tenga valor \u00ab<strong>auto<\/strong>\u00bb (autom\u00e1tico) para sus m\u00e1rgenes izquiero y derecho, de este modo, ambos tendr\u00e1n el mismo y as\u00ed<strong>conseguiremos que nuestra DIV quede centrada<\/strong>, no por alineaci\u00f3n, sino porque debe estar a la misma distancia de ambos flancos de nuestra pantalla.<\/p>\n<p>Para que esto sea efectivo hay que especificarle un \u00ab<strong>width<\/strong>\u00bb (ancho). Por otro lado, podremos a\u00f1adir m\u00e1s elementos al CSS de nuestra DIV, como un \u00ab<strong>border<\/strong>\u00ab, un \u00ab<strong>background<\/strong>\u00bb o lo que queramos siempre y cuando no afecten a la posici\u00f3n de nuestra DIV.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Es com\u00fan querer centrar nuestra p\u00e1gina web horizontalmente, para que no quede toda alineada a la izquierda dejando un enorme espacio vac\u00edo en el lado derecho, cada d\u00eda m\u00e1s notable por los monitores panor\u00e1micos de cada vez m\u00e1s pulgadas. Ocurre que no existe ning\u00fan atributo que haga alinearse a los elementos al centro. Podremos centrar &hellip; <a href=\"http:\/\/pablodelcerro.es\/blog\/2012\/10\/24\/centrar-div-horizontal-con-estilos-css\/\" class=\"more-link\">Seguir leyendo <span class=\"screen-reader-text\">Centrar DIV horizontal con estilos CSS<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[171,3],"tags":[],"_links":{"self":[{"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/posts\/285"}],"collection":[{"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/comments?post=285"}],"version-history":[{"count":1,"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/posts\/285\/revisions"}],"predecessor-version":[{"id":286,"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/posts\/285\/revisions\/286"}],"wp:attachment":[{"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/media?parent=285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/categories?post=285"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/tags?post=285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}