{"id":7,"date":"2012-09-27T11:15:59","date_gmt":"2012-09-27T11:15:59","guid":{"rendered":"http:\/\/icefront.info\/wp\/?p=7"},"modified":"2017-11-27T23:28:32","modified_gmt":"2017-11-27T23:28:32","slug":"inline-images-down-by-1px","status":"publish","type":"post","link":"https:\/\/icefront.info\/index.php\/2012\/09\/27\/inline-images-down-by-1px\/","title":{"rendered":"CSS: Inline images down by 1px"},"content":{"rendered":"<p>Not a big problem, but catches my eyes and at some point looks unprofessional&#8230;<\/p>\n<p>Scenario:<\/p>\n<pre>&lt;p&gt;&lt;img src=\"icon.png\" \/&gt; Some text&lt;\/p&gt;<\/pre>\n<p>When looking at the rendered page, the image is down by 1px, relative to text. Although the img tag is pre-formatted in CSS to appear vertically centered to the text, it&#8217;s appearance is still wrong. I&#8217;ve checked this in many browsers and I found that this everywhere looks the same&#8230;<\/p>\n<p>Look at this example:<\/p>\n<p><img decoding=\"async\" style=\"vertical-align: middle;\" alt=\"\" src=\"\/wp-content\/uploads\/2012\/09\/down.png\" \/> Some text<\/p>\n<p>Check closely the image position&#8230; To see better the image-text alignment, select the text or press Ctrl-A.<\/p>\n<p>The solution&#8230;<\/p>\n<p>Set the image position to relative and move up by 1px:<\/p>\n<pre>style = \"vertical-align: middle; position: relative; top: -0.15em;\"<\/pre>\n<p>Now it looks nice:<\/p>\n<p><img decoding=\"async\" style=\"vertical-align: middle; position: relative; top: -0.15em;\" alt=\"\" src=\"\/wp-data\/css\/down.png\" \/> Some text<\/p>\n<p>That&#8217;s it. For the simplicity and standard workflow, you may include in your css file:<\/p>\n<pre>img {\r\n  border: none;\r\n  vertical-align: middle;\r\n}\r\nimg.text {\r\n  vertical-align: middle;\r\n  position: relative;\r\n  top: -0.15em;\r\n}<\/pre>\n<p>and use the style in html:<\/p>\n<pre>&lt;p&gt;&lt;img src=\"icon.png\" class=\"text\"\/&gt; Some text&lt;\/p&gt;<\/pre>\n<figure id=\"attachment_77\" aria-describedby=\"caption-attachment-77\" style=\"width: 468px\" class=\"wp-caption alignright\"><a href=\"http:\/\/icefront.info\/wp-content\/uploads\/2012\/09\/imagedownby1px.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-77\" title=\"image down by 1px\" alt=\"Inline image down by 1px\" src=\"http:\/\/icefront.info\/wp-content\/uploads\/2012\/09\/imagedownby1px.png\" width=\"468\" height=\"440\" \/><\/a><figcaption id=\"caption-attachment-77\" class=\"wp-caption-text\">Screenshot of selection using inline images<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Not a big problem, but catches my eyes and at some point looks unprofessional&#8230; Scenario: &lt;p&gt;&lt;img src=&#8221;icon.png&#8221; \/&gt; Some text&lt;\/p&gt; When looking at the rendered page, the image is down by 1px, relative to text. Although the img tag is pre-formatted in CSS to appear vertically centered to the text, it&#8217;s appearance is still wrong. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-7","post","type-post","status-publish","format-standard","hentry","category-html-css"],"_links":{"self":[{"href":"https:\/\/icefront.info\/index.php\/wp-json\/wp\/v2\/posts\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/icefront.info\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/icefront.info\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/icefront.info\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/icefront.info\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":3,"href":"https:\/\/icefront.info\/index.php\/wp-json\/wp\/v2\/posts\/7\/revisions"}],"predecessor-version":[{"id":261,"href":"https:\/\/icefront.info\/index.php\/wp-json\/wp\/v2\/posts\/7\/revisions\/261"}],"wp:attachment":[{"href":"https:\/\/icefront.info\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/icefront.info\/index.php\/wp-json\/wp\/v2\/categories?post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/icefront.info\/index.php\/wp-json\/wp\/v2\/tags?post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}