{"id":5980,"date":"2018-11-06T14:38:46","date_gmt":"2018-11-06T19:38:46","guid":{"rendered":"https:\/\/www.pair.com\/support\/kb\/?post_type=ht_kb&p=5980"},"modified":"2023-07-28T12:42:54","modified_gmt":"2023-07-28T16:42:54","slug":"gutenberg-editor-how-to-align-images-in-wordpress","status":"publish","type":"ht_kb","link":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-align-images-in-wordpress\/","title":{"rendered":"Block Editor: How to Align Images in WordPress"},"content":{"rendered":"

WP Enthusiast<\/p><\/a>

WP Professional<\/p><\/a>

WP Professional Plus<\/p><\/a>

PairSIM WordPress<\/p><\/a>

Podcast Websites<\/p><\/a><\/span><\/p>\n

Using images on sites helps make the content engaging and eye-catching. But how do we position images in our WordPress posts? This article will show you how.<\/span><\/p>\n \t\t

\r\n \t\t\t \t\t\t \t\t\t\t

\r\n \t\t\t\t\tMake sure you are using the <\/span>Gutenberg block editor<\/span><\/a>. If you upgraded to <\/span>WordPress 5<\/span><\/a>, then your post and page editor will default to use the Gutenberg editor. If you are still using WordPress 4 (or earlier) or have the <\/span>Classic Editor<\/span><\/a> installed, then your editor will not work with this tutorial.<\/span> \t\t\t\t<\/p>\r\n \t\t\t \t\t\t\r\n \t\t<\/div>\r\n \t\t\n

If you are using the Classic Editor, see our How to Align Images in WordPress article<\/a>.<\/p>\n

How to Align Images in WordPress<\/b><\/h3>\n

Once you\u2019ve<\/span> uploaded<\/span> and<\/span> added<\/span><\/a> an image into your content, you can change its alignment.<\/span><\/p>\n

\t\t

\r\n \t\t\t \t\t\t \t\t\t\t

\r\n \t\t\t\t\tIf you would like more information on uploading and adding images, check out our article:\u00a0<\/span>Block Editor: How to Add Images to Your WordPress Content<\/span><\/a> \t\t\t\t<\/p>\r\n \t\t\t \t\t\t\r\n \t\t<\/div>\r\n \t\t<\/span><\/p>\n

Click on the image you have added to your content. A toolbar will appear. This toolbar contains the alignment options for this image.\"align<\/a><\/span><\/p>\n

Alignment Options<\/b><\/h3>\n

There are a few alignment options you can choose from.<\/p>\n

Right Alignment<\/b><\/h4>\n

To align the image right, click the current alignment icon, then select Align right <\/strong>from the drop-down.\"align<\/a><\/span><\/p>\n

Near blocks will automatically be positioned to the left of the image.<\/span><\/p>\n

\"right<\/a><\/p>\n

Center Alignment<\/b><\/h4>\n

To align the image right, click the current alignment icon, then select Align center <\/strong>from the drop-down.\"align<\/a><\/span><\/p>\n

Near blocks will be automatically positioned above and below the image.\"example<\/a><\/span><\/p>\n

Left Alignment<\/b><\/h4>\n

To align the image right, click the c alignment icon, then select Align left <\/strong>from the drop-down.\"align<\/a><\/span><\/p>\n

Near blocks will be automatically positioned to the right of the image.\"left<\/a><\/span><\/p>\n

Wide Width<\/h3>\n

Wide Width alignment takes the image and stretches it out past the current text, while still leaving some room on the left and right. You can select this alignment by clicking the alignment icon, then selecting Wide Width\u00a0<\/strong>from the drop-down.\"wide<\/a><\/p>\n

The image will be stretched to fit the new alignment.\"wide<\/a><\/p>\n

Full Width<\/h3>\n

Full width is similar to Wide Width, except that it does not leave any room on the left and right. When Full Width is selected, the image is stretched to meet the end of the page on both the left and right sides.<\/p>\n

To use the Full Width alignment, click the alignment icon and select\u00a0Full Width\u00a0<\/strong>from the drop-down.\"full<\/a><\/p>\n

The image will be stretched to meet both the left and right sides of the page.\"full<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Using images on sites helps make the content engaging and eye-catching. But how do we position images in our WordPress posts? This article will show you how. If you are using the Classic Editor, see our How to Align Images in WordPress article. How to Align Images in WordPress Once…<\/p>\n","protected":false},"author":11,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[197],"ht-kb-tag":[198,205,185],"yoast_head":"\nBlock Editor: How to Align Images in WordPress - Knowledge Base - Pair Networks<\/title>\n<meta name=\"description\" content=\"Using images on sites helps make the content engaging and eye-catching. But how do we position images in our WordPress posts?\" \/>\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.pair.com\/support\/kb\/gutenberg-editor-how-to-align-images-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Block Editor: How to Align Images in WordPress - Knowledge Base - Pair Networks\" \/>\n<meta property=\"og:description\" content=\"Using images on sites helps make the content engaging and eye-catching. But how do we position images in our WordPress posts?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-align-images-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Knowledge Base - Pair Networks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pairnetworks\/\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-28T16:42:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2018\/11\/1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@pairNetworks\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-align-images-in-wordpress\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-align-images-in-wordpress\/\",\"name\":\"Block Editor: How to Align Images in WordPress - Knowledge Base - Pair Networks\",\"isPartOf\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\"},\"datePublished\":\"2018-11-06T19:38:46+00:00\",\"dateModified\":\"2023-07-28T16:42:54+00:00\",\"description\":\"Using images on sites helps make the content engaging and eye-catching. But how do we position images in our WordPress posts?\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-align-images-in-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-align-images-in-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-align-images-in-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pair.com\/support\/kb\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Block Editor: How to Align Images in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"name\":\"Knowledge Base - Pair Networks\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\",\"name\":\"Pair Networks\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"contentUrl\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"width\":360,\"height\":360,\"caption\":\"Pair Networks\"},\"image\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pairnetworks\/\",\"https:\/\/twitter.com\/pairNetworks\",\"https:\/\/www.instagram.com\/pairnetworks\/\",\"https:\/\/www.linkedin.com\/company\/2269676\/\",\"https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/\",\"https:\/\/www.youtube.com\/user\/pairnetworks\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Block Editor: How to Align Images in WordPress - Knowledge Base - Pair Networks","description":"Using images on sites helps make the content engaging and eye-catching. But how do we position images in our WordPress posts?","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.pair.com\/support\/kb\/gutenberg-editor-how-to-align-images-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Block Editor: How to Align Images in WordPress - Knowledge Base - Pair Networks","og_description":"Using images on sites helps make the content engaging and eye-catching. But how do we position images in our WordPress posts?","og_url":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-align-images-in-wordpress\/","og_site_name":"Knowledge Base - Pair Networks","article_publisher":"https:\/\/www.facebook.com\/pairnetworks\/","article_modified_time":"2023-07-28T16:42:54+00:00","og_image":[{"url":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2018\/11\/1.png"}],"twitter_card":"summary_large_image","twitter_site":"@pairNetworks","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-align-images-in-wordpress\/","url":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-align-images-in-wordpress\/","name":"Block Editor: How to Align Images in WordPress - Knowledge Base - Pair Networks","isPartOf":{"@id":"https:\/\/www.pair.com\/support\/kb\/#website"},"datePublished":"2018-11-06T19:38:46+00:00","dateModified":"2023-07-28T16:42:54+00:00","description":"Using images on sites helps make the content engaging and eye-catching. But how do we position images in our WordPress posts?","breadcrumb":{"@id":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-align-images-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-align-images-in-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-align-images-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pair.com\/support\/kb\/"},{"@type":"ListItem","position":2,"name":"Block Editor: How to Align Images in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www.pair.com\/support\/kb\/#website","url":"https:\/\/www.pair.com\/support\/kb\/","name":"Knowledge Base - Pair Networks","description":"","publisher":{"@id":"https:\/\/www.pair.com\/support\/kb\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.pair.com\/support\/kb\/#organization","name":"Pair Networks","url":"https:\/\/www.pair.com\/support\/kb\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/","url":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","contentUrl":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","width":360,"height":360,"caption":"Pair Networks"},"image":{"@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pairnetworks\/","https:\/\/twitter.com\/pairNetworks","https:\/\/www.instagram.com\/pairnetworks\/","https:\/\/www.linkedin.com\/company\/2269676\/","https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/","https:\/\/www.youtube.com\/user\/pairnetworks"]}]}},"_links":{"self":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/5980"}],"collection":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/comments?post=5980"}],"version-history":[{"count":14,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/5980\/revisions"}],"predecessor-version":[{"id":9245,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/5980\/revisions\/9245"}],"wp:attachment":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/media?parent=5980"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-category?post=5980"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-tag?post=5980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}