{"id":950,"date":"2011-09-01T19:26:59","date_gmt":"2011-09-01T19:26:59","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2011\/09\/01\/changing-image-alignment\/"},"modified":"2021-08-16T23:52:53","modified_gmt":"2021-08-17T03:52:53","slug":"changing-image-alignment","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/","title":{"rendered":"Changing the Image Alignment"},"content":{"rendered":"<p>In the last tutorial of this series, you learned how to add a basic image to your website. Often you will need to change the alignment of the image on the page. This can be done by modifying you image tag in the HTML code. We will use the same code as we did in the previous tutorial.<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p class=\"code_block\"><strong>&lt;img src=&#8221;Images\/my-image.jpg&#8221; \/&gt;<\/strong><\/p>\n<p>Now we will change the alignment.&nbsp; For the alignment of the image, you have a few options:<\/p>\n<ul>\n<li><strong>align=&#8221;left&#8221;<\/strong><\/li>\n<li><strong>align=&#8221;right&#8221;<\/strong><\/li>\n<li><strong>align=&#8221;middle&#8221;<\/strong><\/li>\n<li><strong>align=&#8221;top&#8221;<\/strong><\/li>\n<li><strong>align=&#8221;bottom&#8221;<\/strong><\/li>\n<\/ul>\n<p>If we have an image that we want to appear in the middle of the page, we will use the &#8220;middle&#8221; alignment tag.&nbsp; The align tag will go in the same code as the img src, like this:<\/p>\n<p class=\"code_block\"><strong style=\"font-weight: bold;\">&lt;img src=&#8221;Images\/image.jpg&#8221; align=&#8221;middle&#8221;&gt;<\/strong><\/p>\n<p>The image will now appear in the middle of the page.&nbsp; When an image is aligned in this method, the text will appear above or below the image.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Please check the next article on <a href=\"\/support\/website\/changing-the-size-of-an-image\/\" target=\"_blank\" title=\"Click here to view the next article\" rel=\"noopener noreferrer\">Changing the Size of an Image<\/a>. If you missed our previous article, please see the <a href=\"\/support\/website\/inserting-images-using-html\/\" target=\"_blank\" title=\"Click here to view the previous article\" rel=\"noopener noreferrer\">Inserting Images using HTML<\/a> tutorial. For more information on this course please visit <a href=\"\/support\/\" target=\"_blank\" title=\"Click here to view the courses\" rel=\"noopener noreferrer\">Inserting Images into a Website<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the last tutorial of this series, you learned how to add a basic image to your website. Often you will need to change the alignment of the image on the page. This can be done by modifying you image tag in the HTML code. We will use the same code as we did in<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/\"> Read More ><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4288],"tags":[],"class_list":["post-950","post","type-post","status-publish","format-standard","hentry","category-website"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Changing the Image Alignment | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Learn how to change how your image aligns on your webpage using HTML.\" \/>\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.inmotionhosting.com\/support\/website\/changing-image-alignment\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Changing the Image Alignment | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Learn how to change how your image aligns on your webpage using HTML.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2011-09-01T19:26:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:52:53+00:00\" \/>\n<meta name=\"author\" content=\"Brad Markle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad Markle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"Changing the Image Alignment\",\"datePublished\":\"2011-09-01T19:26:59+00:00\",\"dateModified\":\"2021-08-17T03:52:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/\"},\"wordCount\":213,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"articleSection\":[\"Website\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/\",\"name\":\"Changing the Image Alignment | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"datePublished\":\"2011-09-01T19:26:59+00:00\",\"dateModified\":\"2021-08-17T03:52:53+00:00\",\"description\":\"Learn how to change how your image aligns on your webpage using HTML.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Changing the Image Alignment\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\",\"name\":\"Brad Markle\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Changing the Image Alignment | InMotion Hosting","description":"Learn how to change how your image aligns on your webpage using HTML.","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.inmotionhosting.com\/support\/website\/changing-image-alignment\/","og_locale":"en_US","og_type":"article","og_title":"Changing the Image Alignment | InMotion Hosting","og_description":"Learn how to change how your image aligns on your webpage using HTML.","og_url":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2011-09-01T19:26:59+00:00","article_modified_time":"2021-08-17T03:52:53+00:00","author":"Brad Markle","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Brad Markle","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"Changing the Image Alignment","datePublished":"2011-09-01T19:26:59+00:00","dateModified":"2021-08-17T03:52:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/"},"wordCount":213,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"articleSection":["Website"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/","url":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/","name":"Changing the Image Alignment | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"datePublished":"2011-09-01T19:26:59+00:00","dateModified":"2021-08-17T03:52:53+00:00","description":"Learn how to change how your image aligns on your webpage using HTML.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-image-alignment\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Changing the Image Alignment"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf","name":"Brad Markle","url":"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=950"}],"version-history":[{"count":3,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/950\/revisions"}],"predecessor-version":[{"id":86604,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/950\/revisions\/86604"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}