{"id":73,"date":"2012-02-03T17:30:46","date_gmt":"2012-02-03T17:30:46","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=73"},"modified":"2012-02-03T17:30:46","modified_gmt":"2012-02-03T17:30:46","slug":"wordpress-center-images-1-line-solution-without-plugin","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/wordpress-center-images-1-line-solution-without-plugin\/","title":{"rendered":"WordPress Center Images &#8211; 1 line solution without plugin"},"content":{"rendered":"<p>While working with WordPress post editor in Admin Panel, you may have noticed that even after you have selected an image and clicked on &#8220;Align Center&#8221; button, the image does not appear centered when the post is viewed i.e. the WordPress Center Images function does not worry correctly on front end.\u00a0\u00a0 The image shows up as centered in the editor, though.\u00a0\u00a0In this post, I am going to give you a 1 line solution to solve this problem and <em><strong>center images in WordPress<\/strong><\/em>, all without using any plugin.<!--more--><\/p>\n<h2>How to Center Images in WordPress<\/h2>\n<p>Let me illustrate the exact problem by means of the following image:<\/p>\n<p><a href=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/uploads\/2012\/02\/images_alignment_before.png\" class=\"broken_link\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-74\" title=\"WordPress Center Images Problem\" alt=\"WordPress Center Images Problem\" src=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/uploads\/2012\/02\/images_alignment_before-300x210.png\" width=\"300\" height=\"210\" \/><\/a><\/p>\n<p><strong>Solution:<\/strong><\/p>\n<p>In your theme that you are using for the WordPress, add the following style in the style.css\u00a0style-sheet:<\/p>\n<p><a href=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/uploads\/2012\/02\/images_alignment_solution.jpg\" class=\"broken_link\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-75\" title=\"WordPress Center Images: Solution\" alt=\"WordPress Center Images: Solution\" src=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/uploads\/2012\/02\/images_alignment_solution-300x41.jpg\" width=\"300\" height=\"41\" \/><\/a><\/p>\n<p>Alternately, you may copy the following code directly into the style-sheet:<\/p>\n<pre class=\"lang:css decode:true\">.aligncenter, img.aligncenter {\nmargin-left: auto; margin-right: auto; display: block; clear: both;\n}<\/pre>\n<p style=\"text-align: center;\"><a href=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/uploads\/2012\/02\/images_alignment_after.png\" class=\"broken_link\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-76\" title=\"WordPress Center Images: Problem Solved!\" alt=\"WordPress Center Images: Problem Solved!\" src=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/uploads\/2012\/02\/images_alignment_after-300x212.png\" width=\"300\" height=\"212\" \/><\/a><\/p>\n<p>As you can see, the images are now aligned perfectly to the center.<\/p>\n<p>Hope this solution helps out the needy.<\/p>\n<h5>Your Turn!<\/h5>\n<p>If you have any questions, please leave a comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While working with WordPress post editor in Admin Panel, you may have noticed that even after you have selected an image and clicked on &#8220;Align Center&#8221; button, the image does not appear centered when the post is viewed i.e. the WordPress Center Images function does not worry correctly on front end.\u00a0\u00a0 The image shows up [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":76,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[13,11],"tags":[29,30],"class_list":["post-73","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-and-tricks","category-wordpress-tips-and-tricks","tag-tips-tricks","tag-wordpress-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-1b","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/73","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=73"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/73\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=73"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=73"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}