{"id":4955,"date":"2019-10-21T09:00:32","date_gmt":"2019-10-21T07:00:32","guid":{"rendered":"https:\/\/blogs.ua.es\/pi\/?p=4955"},"modified":"2019-04-28T04:14:15","modified_gmt":"2019-04-28T02:14:15","slug":"como-alinear-las-cosas-en-css","status":"publish","type":"post","link":"https:\/\/blogs.ua.es\/pi\/2019\/10\/21\/como-alinear-las-cosas-en-css\/","title":{"rendered":"C\u00f3mo alinear las cosas en CSS"},"content":{"rendered":"<p>Imprescindible el art\u00edculo <a href=\"https:\/\/www.smashingmagazine.com\/2019\/03\/css-alignment\/\">How To Align Things In CSS<\/a>:<\/p>\n<blockquote><p>There are a few ways to align elements in CSS. In this article, Rachel Andrew explains what they are with some tips to help you remember which to use and why.<\/p><\/blockquote>\n<p>Los consejos que da son:<\/p>\n<p>To wrap up, I have a quick summary of the basics of alignment. If you remember these few rules, you should be able to align most things with CSS:<\/p>\n<ol>\n<li>Are you aligning text or an inline element? If so, you need to use text-align, vertical-align, and line-height.<\/li>\n<li>Do you have an item or items you want to align in the center of the page or container? If so, make the container a flex container then set align-items: center and justify-content: center.<\/li>\n<li>For Grid Layouts, the properties that start with align- work in the Block direction; those which start with justify- work in the inline direction.<\/li>\n<li>For Flex Layouts, the properties that start with align- work on the Cross Axis; those which start with justify- work on the main axis.<\/li>\n<li>The justify-content and align-content properties distribute extra space. If you have no extra space in your flex or grid container, they will do nothing.<\/li>\n<li>If you think you need justify-self in Flexbox, then using an auto margin will probably give you the pattern you are after.<\/li>\n<li>You can use Grid and Flexbox along with the alignment properties for tiny layout jobs as well as main components \u2014 experiment!<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Imprescindible el art\u00edculo How To Align Things In CSS: There are a few ways to align elements in CSS. In this article, Rachel Andrew explains what they are with some tips to help you remember which to use and why. &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/blogs.ua.es\/pi\/2019\/10\/21\/como-alinear-las-cosas-en-css\/\"> <span class=\"screen-reader-text\">C\u00f3mo alinear las cosas en CSS<\/span> Leer M\u00e1s  &raquo;<\/a><\/p>\n","protected":false},"author":40,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[2765],"class_list":["post-4955","post","type-post","status-publish","format-standard","hentry","category-general","tag-css"],"_links":{"self":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/4955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/comments?post=4955"}],"version-history":[{"count":1,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/4955\/revisions"}],"predecessor-version":[{"id":4956,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/4955\/revisions\/4956"}],"wp:attachment":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/media?parent=4955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/categories?post=4955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/tags?post=4955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}