{"id":203,"date":"2023-06-02T18:32:20","date_gmt":"2023-06-02T16:32:20","guid":{"rendered":"https:\/\/user0.gesem.es\/blog\/?p=203"},"modified":"2023-06-02T18:51:01","modified_gmt":"2023-06-02T16:51:01","slug":"centrar-un-element","status":"publish","type":"post","link":"https:\/\/user0.gesem.es\/blog\/centrar-un-element\/","title":{"rendered":"Centrar un element"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A classe hem limitat les dimensions de les imatges per assegurar-nos de que no es vegin gaire grans a pantalles grans<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img{\n    width:100%;\n    max-width:360px;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Qu\u00e8 hem de fer si volem centrar aquestes imatges?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Farem servir la propietat \u00abmargin\u00bb.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si deixem el mateix marge als dos costats de la imatge es veur\u00e0 centrada, oi?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img{\n    width:100%;\n    max-width:360px;\n    margin: 0 auto;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><em>margin: 0 auto;<\/em> aplicar\u00e0 un marge de 0px a dalt i a baix i un marge \u00abautom\u00e0tic\u00bb a dreta i esquerra. Aix\u00f2 far\u00e0 que els dos marges siguin iguals i tan grans com sigui possible. I fent aix\u00f2, la imatge quedar\u00e0 centrada. voila!<\/p>\n\n\n\n<div class=\"wp-block-group exercici\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Exercici<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aplica aquesta propietat a les teves imatges<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group exercici\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Exercici<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">T&#8217;animes a limitar l&#8217;amplada del contingut de la p\u00e0gina de les pioneres (<a href=\"https:\/\/user0.gesem.es\/blog\/media-queries\/\">exercic proposat aqu\u00ed<\/a>) i a centrar-lo amb aquesta t\u00e8cnica?<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A classe hem limitat les dimensions de les imatges per assegurar-nos de que no es vegin gaire grans a pantalles grans Qu\u00e8 hem de fer si volem centrar aquestes imatges? Farem servir la propietat \u00abmargin\u00bb. Si deixem el mateix marge als dos costats de la imatge es veur\u00e0 centrada, oi? margin: 0 auto; aplicar\u00e0 un&hellip; <a class=\"more-link\" href=\"https:\/\/user0.gesem.es\/blog\/centrar-un-element\/\">Continueu llegint <span class=\"screen-reader-text\">Centrar un element<\/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":[10],"tags":[11,12],"class_list":["post-203","post","type-post","status-publish","format-standard","hentry","category-maquetacio","tag-centrar","tag-margin","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts\/203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=203"}],"version-history":[{"count":2,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts\/203\/revisions"}],"predecessor-version":[{"id":218,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts\/203\/revisions\/218"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/categories?post=203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/tags?post=203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}