{"id":1376,"date":"2012-06-30T09:29:17","date_gmt":"2012-06-30T16:29:17","guid":{"rendered":"http:\/\/www.wellgolly.com\/?p=1376"},"modified":"2012-06-30T12:25:46","modified_gmt":"2012-06-30T19:25:46","slug":"how-to-center-an-image-with-a-caption","status":"publish","type":"post","link":"https:\/\/www.wellgolly.com\/?p=1376","title":{"rendered":"How to center an image with a caption."},"content":{"rendered":"<div class=\"centered\"><img decoding=\"async\" class=\"centered\" src=\"\/images\/696866-spock.jpg\" alt=\"E6-B\" \/><\/p>\n<p class=\"caption\">Let\u2019s check that wind correction angle.<\/p>\n<\/div>\n<p>Use this code:<\/p>\n<p><pre><code class=\"preserve-code-formatting\">\n&lt;div class=&quot;centered&quot;&gt;&lt;img class=&quot;centered&quot; src=&quot;\/images\/696866-spock.jpg&quot; alt=&quot;E6-B&quot; \/&gt;&lt;p class=&quot;caption&quot;&gt;Let\u2019s check that wind correction angle.&lt;\/p&gt;\n&lt;\/div&gt;\n<\/code><\/pre><\/p>\n<p>Note that the whole thing is wrapped in a div and the caption is in a paragraph.<\/p>\n<p>The CSS for the classes is:<\/p>\n<p>Image centering in a paragraph with padding.<br \/>\n<pre><code class=\"preserve-code-formatting\">\nimg.centered {\n&nbsp;&nbsp;display: block;\n&nbsp;&nbsp;margin-left: auto;\n&nbsp;&nbsp;margin-right: auto;\n}\n\n<\/code><\/pre><\/p>\n<p>Caption<br \/>\n<pre><code class=\"preserve-code-formatting\">\n.caption {\n&nbsp;&nbsp;text-align: center;\n&nbsp;&nbsp;margin-top: -4px;\n&nbsp;&nbsp;font-style: italic;\n&nbsp;&nbsp;font-size: 80%;\n}\n<\/code><\/pre><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let\u2019s check that wind correction angle. Use this code: &lt;div class=&quot;centered&quot;&gt;&lt;img class=&quot;centered&quot; src=&quot;\/images\/696866-spock.jpg&quot; alt=&quot;E6-B&quot; \/&gt;&lt;p class=&quot;caption&quot;&gt;Let\u2019s check that wind correction angle.&lt;\/p&gt; &lt;\/div&gt; Note that the whole thing is wrapped in a div and the caption is in a paragraph. The CSS for the classes is: Image centering in a paragraph with padding. img.centered { &nbsp;&nbsp;display: &hellip; <a href=\"https:\/\/www.wellgolly.com\/?p=1376\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">How to center an image with a caption.<\/span><\/a><\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-1376","post","type-post","status-publish","format-standard","hentry","category-coding"],"_links":{"self":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts\/1376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1376"}],"version-history":[{"count":0,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts\/1376\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}