{"id":1636,"date":"2019-07-14T23:43:37","date_gmt":"2019-07-14T15:43:37","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=1636"},"modified":"2020-05-12T11:01:02","modified_gmt":"2020-05-12T03:01:02","slug":"css-styles-for-styling-image-alignment-in-your-wordpress-pages-and-posts","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/css-styles-for-styling-image-alignment-in-your-wordpress-pages-and-posts\/","title":{"rendered":"CSS styles for styling image alignment in your WordPress pages and posts"},"content":{"rendered":"<p>When you create your own <a href=\"https:\/\/developer.wordpress.org\/themes\/getting-started\/what-is-a-theme\/\" rel=\"noopener\" target=\"_blank\">WordPress theme<\/a>, one of the things of provide for is the ability to style image alignments. <\/p>\n<p>By default, the <a href=\"https:\/\/en.support.wordpress.com\/wordpress-editor\/\" rel=\"noopener\" target=\"_blank\">WordPress Editor<\/a> will include one of the predefined CSS classes when we add images to a post or page.<\/p>\n<p>Therefore, by providing the CSS styles for each of these classes, we will be able to style the image alignment of our WordPress pages and posts.<\/p>\n<p>Given these points, let us look at the CSS styles for styling image alignment in our WordPress pages and posts.<\/p>\n<h2>What are the CSS classes that the WordPress editor adds to images inside a post or a page?<\/h2>\n<p>The following table shows the CSS classes that the WordPress editor adds to images for different alignments:<\/p>\n<table>\n<tr>\n<th>Alignment<\/th>\n<th>CSS class<\/th>\n<\/tr>\n<tr>\n<td>No Alignment<\/td>\n<td>alignnone<\/td>\n<\/tr>\n<tr>\n<td>Left aligned<\/td>\n<td>alignleft<\/td>\n<\/tr>\n<tr>\n<td>Center aligned<\/td>\n<td>aligncenter<\/td>\n<\/tr>\n<tr>\n<td>Right aligned<\/td>\n<td>alignright<\/td>\n<\/tr>\n<\/table>\n<h2>CSS styles for styling image alignment in your WordPress pages and posts<\/h2>\n<p>Once we know the CSS classes that the WordPress editor adds to images inside a post or a page, we can define the CSS styling for each of the classes:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\nimg.alignnone {\r\n\tfloat:none; margin: 5px 0 5px 0;\r\n}\r\n\r\nimg.alignleft {\r\n\tfloat:left; \r\n\tmargin: 5px 10px 5px 0px;\r\n}\r\n\r\nimg.aligncenter {\r\n\tdisplay:block;\r\n\tfloat:none;\r\n\tmargin: 5px auto;\r\n}\r\n\r\nimg.alignright {\r\n\tfloat:right;\r\n\tmargin: 5px 0 5px 10px;\r\n}\r\n<\/pre>\n<p>After you had included the above CSS styles in your WordPress theme, you will be able to align images in your pages and posts with your WordPress editor.<\/p>\n<h3>Content with an image having no alignment<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/Sample-WordPress-content-with-an-image-having-with-no-alignment.jpg\" alt=\"Sample WordPress content with an image having with no alignment\" \/><\/p>\n<h3>Content with an image that is left aligned<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/Sample-WordPress-content-with-an-image-that-is-left-aligned.jpg\" alt=\"Sample WordPress content with an image that is left aligned\" \/><\/p>\n<h3>Content with an image that is center aligned<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/Sample-WordPress-content-with-an-image-that-is-center-aligned.jpg\" alt=\"Sample WordPress content with an image that is center aligned\" \/><\/p>\n<h3>Content with an image that is right aligned<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/Sample-WordPress-content-with-an-image-that-is-right-aligned.jpg\" alt=\"Sample WordPress content with an image that is right aligned\" \/><\/p>\n\n      <ul id=\"social-sharing-buttons-list\">\n        <li class=\"facebook\">\n          <a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwp.me%2Fp245TQ-qo\" target=\"_blank\" role=\"button\" rel=\"nofollow\">\n            <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/Facebook.png\" alt=\"Facebook icon\"> Share\n          <\/a>\n        <\/li>\n        <li class=\"twitter\">\n          <a href=\"https:\/\/twitter.com\/intent\/tweet?text=&url=https%3A%2F%2Fwp.me%2Fp245TQ-qo&via=Techcoil_com\" target=\"_blank\" role=\"button\" rel=\"nofollow\">\n          <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/Twitter.png\" alt=\"Twitter icon\"> Tweet\n          <\/a>\n        <\/li>\n        <li class=\"linkedin\">\n          <a href=\"https:\/\/www.linkedin.com\/shareArticle?mini=1&title=&url=https%3A%2F%2Fwp.me%2Fp245TQ-qo&source=https:\/\/www.techcoil.com\" target=\"_blank\" role=\"button\" rel=\"nofollow\">\n          <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/linkedin.png\" alt=\"Linkedin icon\"> Share\n          <\/a>\n        <\/li>\n        <li class=\"pinterest\">\n          <a href=\"https:\/\/pinterest.com\/pin\/create\/button\/?url=https%3A%2F%2Fwww.techcoil.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F1636&description=\" class=\"pin-it-button\" target=\"_blank\" role=\"button\" rel=\"nofollow\" count-layout=\"horizontal\">\n          <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/Pinterest.png\" alt=\"Pinterest icon\"> Save\n          <\/a>\n        <\/li>\n      <\/ul>\n    ","protected":false},"excerpt":{"rendered":"<p>When you create your own <a href=\"https:\/\/developer.wordpress.org\/themes\/getting-started\/what-is-a-theme\/\" rel=\"noopener\" target=\"_blank\">WordPress theme<\/a>, one of the things of provide for is the ability to style image alignments. <\/p>\n<p>By default, the <a href=\"https:\/\/en.support.wordpress.com\/wordpress-editor\/\" rel=\"noopener\" target=\"_blank\">WordPress Editor<\/a> will include one of the predefined CSS classes when we add images to a post or page.<\/p>\n<p>Therefore, by providing the CSS styles for each of these classes, we will be able to style the image alignment of our WordPress pages and posts.<\/p>\n<p>Given these points, let us look at the CSS styles for styling image alignment in our WordPress pages and posts.<\/p>\n","protected":false},"author":1,"featured_media":1637,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"footnotes":""},"categories":[375,4],"tags":[17,5,665,667,666,170,664],"jetpack_featured_media_url":"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/WordPress-editor-with-sample-content-and-image-with-image-alignment-options.jpg","jetpack_shortlink":"https:\/\/wp.me\/p245TQ-qo","jetpack-related-posts":[],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/1636"}],"collection":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/comments?post=1636"}],"version-history":[{"count":0,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/1636\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media\/1637"}],"wp:attachment":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media?parent=1636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/categories?post=1636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/tags?post=1636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}