{"id":9,"date":"2009-01-11T19:52:00","date_gmt":"2009-01-11T23:52:00","guid":{"rendered":"http:\/\/kogblog.salticid.com\/?p=9"},"modified":"2010-07-31T16:42:25","modified_gmt":"2010-07-31T20:42:25","slug":"stubborn-craziness-centering-an-image-horizontally-and-vertically-with-css-in-ie7","status":"publish","type":"post","link":"https:\/\/www.salticid.com\/kogblog\/2009\/01\/stubborn-craziness-centering-an-image-horizontally-and-vertically-with-css-in-ie7\/","title":{"rendered":"Stubborn craziness: centering an image horizontally and vertically with CSS in IE7"},"content":{"rendered":"<p>So, I&#8217;ve been telling everyone how learning CSS is totally worth it and not as hard as it seems. But today I spent probably 2 hours trying to get one simple image vertically aligned without using a table. I should have just put in a table, but I&#8217;m crazy stubborn. I guess it was educational&#8230; The breakthrough was finding <a href=\"http:\/\/www.zoffix.com\/zoffix\/css\/vertcenter.shtml\">this site<\/a> for vertical centering, but then I had a hard time making it center horizontally too. You can see the ultimate solution at <a href=\"http:\/\/www.jonathancaws-elwitt.com\/\">Jonathan&#8217;s new website<\/a> (just a forwarder right now, so the code is simple), but here it is for anyone searching. There are a zillion solutions out there, which SEEM to be collected at <a href=\"http:\/\/www.webmasterworld.com\/css\/3350566.htm\">SuzyUK&#8217;s thread<\/a>, but I couldn&#8217;t get any of those to work for me. I fully admit my approach to CSS still has a lot of superstition!<\/p>\n<p>Style sheet:<\/p>\n<p><pre class=\"preserve-code-formatting\">\n&lt;!--\nbody {\n&nbsp;&nbsp;&nbsp;&nbsp;background-color: #000000;\n&nbsp;&nbsp;&nbsp;&nbsp;margin: 0;\n&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;}\n#outer {\n&nbsp;&nbsp;&nbsp;&nbsp; top: 0;\n&nbsp;&nbsp;&nbsp;&nbsp; left: 0;\n&nbsp;&nbsp;&nbsp;&nbsp; width: 100%;\n&nbsp;&nbsp;&nbsp;&nbsp; height: 100%;\n&nbsp;&nbsp;&nbsp;&nbsp; position: fixed;\n&nbsp;&nbsp;&nbsp;&nbsp; display: table;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp; }\n#middle {\n&nbsp;&nbsp;&nbsp;&nbsp;display: table-cell;\n&nbsp;&nbsp;&nbsp;&nbsp;height: 540px;\n&nbsp;&nbsp;&nbsp;&nbsp;vertical-align: middle;\n&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;\n&nbsp;&nbsp;&nbsp;&nbsp;}\nimg {&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;border: 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;margin: 1em auto;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;}\n--&gt;\n\n&lt;!--[if IE]&gt;\n&lt;mce:style type=&quot;text\/css&quot;&gt;\n&lt;! \n#middle {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50%;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 50%;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: auto\n&nbsp;&nbsp;&nbsp;&nbsp;}\n#inner&nbsp;&nbsp;&nbsp;&nbsp; {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: -50%;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: -50%;\n&nbsp;&nbsp;&nbsp;&nbsp;}\n--&gt;\n&lt;!--[endif]--&gt;\n<\/pre><\/p>\n<p>and the code:<\/p>\n<p><pre class=\"preserve-code-formatting\">\n&lt;div id=&quot;outer&quot;&gt;\n&lt;div id=&quot;middle&quot;&gt; \n&lt;div id=&quot;inner&quot;&gt;\n &lt;a href=&quot;http:\/\/home.epix.net\/~hce\/jhumor.html&quot;&gt; \n&lt;img title=&quot;Click to enter&quot; src=&quot;JCEcom.jpg&quot; alt=&quot;Jonathan Caws-Elwitt, humorist and playwright&quot; width=&quot;720&quot; height=&quot;540&quot; \/&gt; \n&lt;\/a&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre><\/p>\n","protected":false},"excerpt":{"rendered":"<p>So, I&#8217;ve been telling everyone how learning CSS is totally worth it and not as hard as it seems. But today I spent probably 2 hours trying to get one simple image vertically aligned without using a table. I should have just put in a table, but I&#8217;m crazy stubborn. I guess it was educational&#8230; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[11,10],"class_list":["post-9","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-css","tag-software"],"_links":{"self":[{"href":"https:\/\/www.salticid.com\/kogblog\/wp-json\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.salticid.com\/kogblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.salticid.com\/kogblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.salticid.com\/kogblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.salticid.com\/kogblog\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":5,"href":"https:\/\/www.salticid.com\/kogblog\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/www.salticid.com\/kogblog\/wp-json\/wp\/v2\/posts\/9\/revisions\/88"}],"wp:attachment":[{"href":"https:\/\/www.salticid.com\/kogblog\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.salticid.com\/kogblog\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.salticid.com\/kogblog\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}