{"id":200,"date":"2020-02-12T10:36:59","date_gmt":"2020-02-12T10:36:59","guid":{"rendered":"https:\/\/www.lcn.com\/support\/knowledge-base\/how-to-center-an-element-in-instantsite\/"},"modified":"2020-08-11T08:16:59","modified_gmt":"2020-08-11T08:16:59","slug":"how-to-center-an-element-in-instantsite","status":"publish","type":"ht_kb","link":"https:\/\/www.lcn.com\/support\/articles\/how-to-center-an-element-in-instantsite\/","title":{"rendered":"How to center an element in InstantSite"},"content":{"rendered":"\n
\n

Please note:<\/strong>\u00a0This guide is for\u00a0legacy\u00a0InstantSite\u00a0pruchsed\u00a0before the 18th August 2020. If you have our new\u00a0InstantSite\u00a0please see guides specific\u00a0for our new\u00a0builder found\u00a0here<\/a>.<\/span><\/p>\n<\/div>\n\n\n\n

Centering elements on a page is super important. Whether its a contact form, call to action button or an image, this guide will show InstantSite<\/a> customers how to center an element.<\/p>\n\n\n\n

\n

Please note<\/strong>: Inline elements like images, buttons and icons can be centred in their container using the text alignment setting on the element. When you want to centre an element (e.g. a block of text), but don’t want to alter the text alignment, you can move the column containing the element into the centre as shown in the guide below.<\/span><\/p>\n<\/div>\n\n\n\n

Let\u2019s get started…<\/p>\n\n\n\n

Aligning Columns<\/h3>\n\n\n\n
  1. Login to the InstantSite editor.<\/li>
  2. Select the row you\u2019d like to edit and add an element<\/a> to that row.<\/li>
  3. Click on the column and select the Move Column<\/strong> icon.<\/li>
  4. Adjust the column left and right until you have the element centered.<\/li>
  5. Finally, adjust the content on your element.<\/li><\/ol>\n\n\n\n

    Centre Aligning Element Containers<\/h3>\n\n\n\n

    You can use the \u2018centre element container\u2019 option to centre-align an element container to the centre of the column holding the element.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Ticking the ‘Centre element container’ option will move the element container to the centre of the page column that the element has been inserted to. This wont affect the alignment of the image within its container, which can still be set using the text-align options.<\/p>\n\n\n\n

    That\u2019s it! You\u2019ve successfully created a centred element.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Please note:\u00a0This guide is for\u00a0legacy\u00a0InstantSite\u00a0pruchsed\u00a0before the 18th August 2020. If you have our new\u00a0InstantSite\u00a0please see guides specific\u00a0for our new\u00a0builder found\u00a0here. Centering elements on a page is super important. Whether its a contact form, call to action button or an image, this guide will show InstantSite customers how to center an element. Please note: Inline elements […]<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[4],"ht-kb-tag":[20],"class_list":["post-200","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-managing-web-hosting","ht_kb_tag-instantsite"],"yoast_head":"\nHow to center an element in InstantSite - LCN.com<\/title>\n<meta name=\"description\" content=\"Centering elements on a page is super important. Whether its a contact form, call to action button or an image, this guide will show InstantSite customers how to center an element.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.lcn.com\/support\/articles\/how-to-center-an-element-in-instantsite\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to center an element in InstantSite - LCN.com\" \/>\n<meta property=\"og:description\" content=\"Centering elements on a page is super important. Whether its a contact form, call to action button or an image, this guide will show InstantSite customers how to center an element.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.lcn.com\/support\/articles\/how-to-center-an-element-in-instantsite\/\" \/>\n<meta property=\"og:site_name\" content=\"Customer Support Guides - LCN\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/lcndotcom\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-11T08:16:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.lcn.com\/support\/articles\/attachment\/642\/inline\/original\/1512739507\/instant_site_centre_element.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@lcndotcom\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.lcn.com\/support\/articles\/how-to-center-an-element-in-instantsite\/\",\"url\":\"https:\/\/www.lcn.com\/support\/articles\/how-to-center-an-element-in-instantsite\/\",\"name\":\"How to center an element in InstantSite - LCN.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.lcn.com\/support\/#website\"},\"datePublished\":\"2020-02-12T10:36:59+00:00\",\"dateModified\":\"2020-08-11T08:16:59+00:00\",\"description\":\"Centering elements on a page is super important. Whether its a contact form, call to action button or an image, this guide will show InstantSite customers how to center an element.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.lcn.com\/support\/articles\/how-to-center-an-element-in-instantsite\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.lcn.com\/support\/articles\/how-to-center-an-element-in-instantsite\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.lcn.com\/support\/articles\/how-to-center-an-element-in-instantsite\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.lcn.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to center an element in InstantSite\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.lcn.com\/support\/#website\",\"url\":\"https:\/\/www.lcn.com\/support\/\",\"name\":\"Customer Support Guides - LCN\",\"description\":\"- LCN\",\"publisher\":{\"@id\":\"https:\/\/www.lcn.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.lcn.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.lcn.com\/support\/#organization\",\"name\":\"LCN.com\",\"url\":\"https:\/\/www.lcn.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.lcn.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/2020\/02\/ZF_-hcc3.jpg\",\"contentUrl\":\"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/2020\/02\/ZF_-hcc3.jpg\",\"width\":461,\"height\":461,\"caption\":\"LCN.com\"},\"image\":{\"@id\":\"https:\/\/www.lcn.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/lcndotcom\",\"https:\/\/x.com\/lcndotcom\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to center an element in InstantSite - LCN.com","description":"Centering elements on a page is super important. Whether its a contact form, call to action button or an image, this guide will show InstantSite customers how to center an element.","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:\/\/www.lcn.com\/support\/articles\/how-to-center-an-element-in-instantsite\/","og_locale":"en_US","og_type":"article","og_title":"How to center an element in InstantSite - LCN.com","og_description":"Centering elements on a page is super important. Whether its a contact form, call to action button or an image, this guide will show InstantSite customers how to center an element.","og_url":"https:\/\/www.lcn.com\/support\/articles\/how-to-center-an-element-in-instantsite\/","og_site_name":"Customer Support Guides - LCN","article_publisher":"https:\/\/www.facebook.com\/lcndotcom","article_modified_time":"2020-08-11T08:16:59+00:00","og_image":[{"url":"https:\/\/www.lcn.com\/support\/articles\/attachment\/642\/inline\/original\/1512739507\/instant_site_centre_element.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@lcndotcom","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.lcn.com\/support\/articles\/how-to-center-an-element-in-instantsite\/","url":"https:\/\/www.lcn.com\/support\/articles\/how-to-center-an-element-in-instantsite\/","name":"How to center an element in InstantSite - LCN.com","isPartOf":{"@id":"https:\/\/www.lcn.com\/support\/#website"},"datePublished":"2020-02-12T10:36:59+00:00","dateModified":"2020-08-11T08:16:59+00:00","description":"Centering elements on a page is super important. Whether its a contact form, call to action button or an image, this guide will show InstantSite customers how to center an element.","breadcrumb":{"@id":"https:\/\/www.lcn.com\/support\/articles\/how-to-center-an-element-in-instantsite\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.lcn.com\/support\/articles\/how-to-center-an-element-in-instantsite\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.lcn.com\/support\/articles\/how-to-center-an-element-in-instantsite\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.lcn.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to center an element in InstantSite"}]},{"@type":"WebSite","@id":"https:\/\/www.lcn.com\/support\/#website","url":"https:\/\/www.lcn.com\/support\/","name":"Customer Support Guides - LCN","description":"- LCN","publisher":{"@id":"https:\/\/www.lcn.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.lcn.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.lcn.com\/support\/#organization","name":"LCN.com","url":"https:\/\/www.lcn.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.lcn.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/2020\/02\/ZF_-hcc3.jpg","contentUrl":"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/2020\/02\/ZF_-hcc3.jpg","width":461,"height":461,"caption":"LCN.com"},"image":{"@id":"https:\/\/www.lcn.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/lcndotcom","https:\/\/x.com\/lcndotcom"]}]}},"_links":{"self":[{"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb\/200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/comments?post=200"}],"version-history":[{"count":1,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb\/200\/revisions"}],"predecessor-version":[{"id":1030,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb\/200\/revisions\/1030"}],"wp:attachment":[{"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/media?parent=200"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb-category?post=200"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb-tag?post=200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}