{"id":399,"date":"2015-04-15T15:41:40","date_gmt":"2015-04-15T14:41:40","guid":{"rendered":"http:\/\/heymowski.es\/mydevnotepad\/?p=399"},"modified":"2015-04-26T18:33:11","modified_gmt":"2015-04-26T17:33:11","slug":"alinear-horizontal-y-verticalmente","status":"publish","type":"post","link":"https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/","title":{"rendered":"Alinear Horizontal y Verticalmente"},"content":{"rendered":"

Para ello introduciremos el objeto a centrar en otro con\u00a0 propiedades display:table, el objeto a centrar tendr\u00e1 el Display:table-cell.<\/p>\n

Sigue el ejemplo<\/p>\n

.ExternContainer{\r\n top: 0px;\r\n left: 0px;\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n display: table;\r\n }\r\n .InternContainer{\r\n display: table-cell;\r\n text-align: center;\r\n vertical-align: middle;\r\n }<\/pre>\n
Recurso: http:\/\/www.w3.org\/Style\/Examples\/007\/center-example<\/a><\/p>\n
M\u00e9todo para centrar Listas Horizontalmente:<\/p>\n
HTML:\r\n<div id=\"menu-outer\">\r\n\u00a0 <div class=\"table\">\r\n\u00a0\u00a0\u00a0 <ul id=\"horizontal-list\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"#\"><img src=\"images\/list-item-1.gif\" alt=\"list item 1\" \/><\/a><\/li>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"#\"><img src=\"images\/list-item-2.gif\" alt=\"list item 2\" \/><\/a><\/li>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"#\"><img src=\"images\/list-item-3.gif\" alt=\"list item 3\" \/><\/a><\/li>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"#\"><img src=\"images\/list-item-4.gif\" alt=\"list item 4\" \/><\/a><\/li>\r\n\u00a0\u00a0\u00a0 <\/ul>\r\n\u00a0 <\/div>\r\n<\/div>\r\n\r\nCSS:\r\n\r\n#menu-outer {\r\n\u00a0\u00a0 \u00a0height: 84px;\r\n\u00a0\u00a0 \u00a0background: url(images\/bar-bg.jpg) repeat-x;\r\n}\r\n\r\n.table {\r\n\u00a0\u00a0 \u00a0display: table;\u00a0\u00a0 \/* Allow the centering to work *\/\r\n\u00a0\u00a0 \u00a0margin: 0 auto;\r\n}\r\n\r\nul#horizontal-list {\r\n\u00a0\u00a0 \u00a0min-width: 696px;\r\n\u00a0\u00a0 \u00a0list-style: none;\r\n\u00a0\u00a0 \u00a0padding-top: 20px;\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0ul#horizontal-list li {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0display: inline;\r\n\u00a0\u00a0 \u00a0}<\/pre>\n
Recurso: https:\/\/css-tricks.com\/centering-list-items-horizontally-slightly-trickier-than-you-might-think\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Para ello introduciremos el objeto a centrar en otro con\u00a0 propiedades display:table, el objeto a centrar tendr\u00e1 el Display:table-cell. Sigue el ejemplo .ExternContainer{ top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; display: table; } .InternContainer{ display: table-cell; text-align: … Sigue leyendo →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[13,8],"tags":[],"class_list":["post-399","post","type-post","status-publish","format-standard","hentry","category-css","category-html"],"yoast_head":"\nAlinear Horizontal y Verticalmente | mydevnotepad<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"jjuanh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/\"},\"author\":{\"name\":\"jjuanh\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3\"},\"headline\":\"Alinear Horizontal y Verticalmente\",\"datePublished\":\"2015-04-15T14:41:40+00:00\",\"dateModified\":\"2015-04-26T17:33:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/\"},\"wordCount\":47,\"commentCount\":0,\"articleSection\":[\"CSS\",\"HTML\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/\",\"url\":\"https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/\",\"name\":\"Alinear Horizontal y Verticalmente | mydevnotepad\",\"isPartOf\":{\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#website\"},\"datePublished\":\"2015-04-15T14:41:40+00:00\",\"dateModified\":\"2015-04-26T17:33:11+00:00\",\"author\":{\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#website\",\"url\":\"https:\/\/heymowski.es\/mydevnotepad\/\",\"name\":\"mydevnotepad\",\"description\":\"echo "Blog sobre Php y otros entretenimientos, para reforzar mi fr\u00e1gil memoria";\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heymowski.es\/mydevnotepad\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3\",\"name\":\"jjuanh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bf9cff5d33a0b664a36c8a2188742797ff6063e120fd22b1a15f3b45616b6707?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bf9cff5d33a0b664a36c8a2188742797ff6063e120fd22b1a15f3b45616b6707?s=96&d=mm&r=g\",\"caption\":\"jjuanh\"},\"sameAs\":[\"http:\/\/www.heymowski.es\"],\"url\":\"https:\/\/heymowski.es\/mydevnotepad\/author\/jjuanh\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Alinear Horizontal y Verticalmente | mydevnotepad","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/","twitter_misc":{"Escrito por":"jjuanh","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/#article","isPartOf":{"@id":"https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/"},"author":{"name":"jjuanh","@id":"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3"},"headline":"Alinear Horizontal y Verticalmente","datePublished":"2015-04-15T14:41:40+00:00","dateModified":"2015-04-26T17:33:11+00:00","mainEntityOfPage":{"@id":"https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/"},"wordCount":47,"commentCount":0,"articleSection":["CSS","HTML"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/","url":"https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/","name":"Alinear Horizontal y Verticalmente | mydevnotepad","isPartOf":{"@id":"https:\/\/heymowski.es\/mydevnotepad\/#website"},"datePublished":"2015-04-15T14:41:40+00:00","dateModified":"2015-04-26T17:33:11+00:00","author":{"@id":"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/heymowski.es\/mydevnotepad\/2015\/04\/15\/alinear-horizontal-y-verticalmente\/"]}]},{"@type":"WebSite","@id":"https:\/\/heymowski.es\/mydevnotepad\/#website","url":"https:\/\/heymowski.es\/mydevnotepad\/","name":"mydevnotepad","description":"echo "Blog sobre Php y otros entretenimientos, para reforzar mi fr\u00e1gil memoria";","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heymowski.es\/mydevnotepad\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3","name":"jjuanh","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bf9cff5d33a0b664a36c8a2188742797ff6063e120fd22b1a15f3b45616b6707?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bf9cff5d33a0b664a36c8a2188742797ff6063e120fd22b1a15f3b45616b6707?s=96&d=mm&r=g","caption":"jjuanh"},"sameAs":["http:\/\/www.heymowski.es"],"url":"https:\/\/heymowski.es\/mydevnotepad\/author\/jjuanh\/"}]}},"_links":{"self":[{"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/posts\/399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/comments?post=399"}],"version-history":[{"count":5,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/posts\/399\/revisions"}],"predecessor-version":[{"id":405,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/posts\/399\/revisions\/405"}],"wp:attachment":[{"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/media?parent=399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/categories?post=399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/tags?post=399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}