title: centered div doesnt work in IE8
body: <p>I made tumblr theme and it works perfectly in chrome, but when I turn IE my align (when hovering over images and after opening images (permalink page)) is messed up. IE 
  [enter link description here][1]move eberything too the right. I tried almost everything, but it still not working ...</p>
  
  <p>here is tumblr page:</p>
  
  <pre><code>http://nolnspiration.tumblr.com/
  </code></pre>
  
  <p>and here is code:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  
  &lt;head&gt;
  
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
  
  &lt;title&gt;{Title}&lt;/title&gt;
  
  &lt;meta name="description" content="{block:IndexPage}{block:Description}{MetaDescription}{/block:Description}{/block:IndexPage}{block:PermalinkPage}{block:PostSummary}{PostSummary}{/block:PostSummary}{/block:PermalinkPage}" /&gt;
  
  &lt;link rel="shortcut icon" href="{Favicon}" /&gt;
  &lt;link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" /&gt;
  
  &lt;script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /&gt;
  
  
  &lt;!-- Icon Awesome --&gt;
  &lt;link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"&gt;
  
  &lt;!-- jQuery --&gt; 
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script src="http://masonry.desandro.com/masonry.pkgd.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://masonry.desandro.com/js/jquery.infinitescroll.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
  &lt;!--MENU SLIDE --&gt;
  &lt;script type="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  /*RESET*/    
  /* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126
     License: none (public domain)
  */
  
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
      display: block;
  }
  body {
      line-height: 1;
  }
  ol, ul {
      list-style: none;
  }
  blockquote, q {
      quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
      content: '';
      content: none;
  }
  table {
      border-collapse: collapse;
      border-spacing: 0;
  }
  
  
  body {
      background-color: #FFFFFF;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10pt; 
      vertical-align: baseline;
      color: #3e4347;
      }
  a:link {color:#349bc8;}      /* unvisited link */
  a:visited {color:#349bc8;}  /* visited link */
  a:hover {color:#349bc8;}  /* mouse over link */
  a:active {color:#349bc8;}  /* selected link */ 
  
  a {
      text-decoration: none;
      outline: none;
  }
  
  a img {
      border: none;
  }
  
  #entirety {
      margin: 0 auto;
      width: 100%; }
  #menu{
      position:relative;
      width:100% !important;
      height: 340px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-transition:  height 0.4s ease-in-out;
      -moz-transition:  height 0.4s ease-in-out;
      -ms-transition:  height 0.4s ease-in-out;
      -o-transition:  height 0.4s ease-in-out;
      transition:  height 0.4s ease-in-out;
      }
  #headerBg{
      position: absolute;
      z-index: 1;
      width:100%;
      height: 300px;
      background-image:url("http://static.tumblr.com/2e5jfgm/ngMn1jpzk/bacground__1_.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  
  }
  #whiteMask{
      width:40%;
      float: right;
      height:300px;
      background-color: white;
  
  }
  .menuStripe{
      position: absolute;
      z-index: 0;
      top: 90px;
      width: 100%;
      height: 250px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-transition:  top 0.4s ease-in-out;
      -moz-transition:  top 0.4s ease-in-out;
      -ms-transition:  top 0.4s ease-in-out;
      -o-transition:  top 0.4s ease-in-out;
      transition:  top 0.4s ease-in-out;
      background-color: #141d1d;
  }
  .menuContentContainer{
      height: 210px;
      width: 100%;
      display: block;
      position:relative;
  }
  .menuContentContainer ul{
      float: left;
      padding: 12px 10px 10px 50px;
      color: white;
      list-style-type:square;
  }
  .menuContentContainer ul li{
      padding: 8px 0px 0px 0px;
      list-style-type:square;
  }
  .menuContentContainer ul li a{
      font-family: SourceSansProRegular;
      font-size: 11pt;
      -webkit-font-smoothing: antialiased !important;
      list-style-type:square;
      color: white;
  }
  .menuContentContainer ul li a:hover {opacity: 0.8}  /* mouse over link */
  
  .Description{
      font-family: SourceSansProLight;
      font-size: 11pt;
      line-height: 14pt;
      color: white;
      opacity: 0.7;
      width: 50%;
      float: right;
  }
  
  .menuButton{
      position:relative;
      float: left;
      cursor: pointer;
      cursor: hand;
  }
  .menuButton i{
      padding: 10px 10px 10px 10px;
      color: white;
      font-size: 14pt;
  }
  
  #container{
      vertical-align: center;
      position: relative;
      padding: 10px;
      }
  .blogtitle, .blogtitle a {
      font-size: 20pt;
      color: #d7ceb2;
      text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 10px; }
  
  .post{
      float: left;
      display: block;
      margin: 10px;
      overflow: hidden;
      position: relative;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
  }
  
  
  .pic{
      overflow: hidden;
      float: left;
      width: 300px;
      }
  
  
  .photoset{
      float: left;
      width: 300px; }
  .vid{
      float: left;
      padding: 0px;
      width: 400px; }
  .text{
      float: left;
      width: 300px; }
  .audio{
      float: left;
      width: 300px; }   
  .post img {
      max-width: 300px;
      }
  #caption{
      display: inline-block;
      position: relative;
      margin: 20px;
      }
  #bottomnav{
      width: 100%;
      line-height:19px;
      margin: 10px 0px 20px 10px;
      display: table-cell;
      vertical-align: middle;
      }
  #bottomnav a{
      color: white;
      text-decoration: none;
      }
  #Arrow
  {   
      float: left;
      font-size: 14px;
      font-weight:bold;
      vertical-align: middle;
      display: inline-block;
      opacity: 0.5;
      vertical-align: middle;
      background-color: #9e9e9e;
      width: 100px;
      height: 22px;
      padding:10px 10px 5px 10px;
      margin:0px 0px 20px 0px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
  
  }
  #Arrow:hover
  {
      opacity: 0.6;
  }
  
  #page_count{
      color: #3e4347;
      float: left;
      display:inline-block;
      vertical-align: middle;     
      line-height:19px;
      font-weight: bold;
      font-family: Arial;
      font-size: 14px;
      padding:10px 20px 5px 20px;
  }
  
  
  .caption-4 {
      overflow: hidden;
      background: rgba(0,0,0,0.2);
      -webkit-transition: background 0.3s ease-in-out;
      -moz-transition: background 0.3s ease-in-out;
      transition: background 0.3s ease-in-out;
  }
  
  .caption-4:hover {
      background: rgba(0,0,0,0);
  }
  
  .caption-4 img {
      -webkit-transition: -webkit-transform 0.3s ease-in-out;
      -moz-transition: -moz-transform 0.3s ease-in-out;
      transition: transform 0.3s ease-in-out;
  }
  
  .caption-4:hover img {
      -webkit-transform: translateX(0%);
      -moz-transform: translateX(0%);
      transform: translateX(0%);
  }
  
  .PostCaption {
      overflow: hidden;
      width: 300px;
      height: 100%;
      z-index: 1;
      position: absolute;
      background: #000000;
      opacity: 0.9;
      -webkit-transform: translateX(-100%);
      -moz-transform: translateX(-100%);
      transform: translateX(-100%);
      -webkit-transition: -webkit-transform 0.3s ease-in-out;
      -moz-transition: -moz-transform 0.3s ease-in-out;
      transition: transform 0.3s ease-in-out;
          -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
  }
  
  
  .pic:hover .PostCaption{
      -webkit-transform: translateX(0%);
      -moz-transform: translateX(0%);
      transform: translateX(0%);
  }
  .tableAlign{
    height:100%;
    width:100%;
    display:table;  
  }
  
  .LikeReblogButton{
      webkit-transform: translateX(50%);
      -moz-transform: translateX(50%);
      transform: translateX(50%);
      vertical-align:middle;
      width: 300px;
      height:100%;
      display:table-cell;
  }
  .innerButtonsContainer{
      display: table;
      margin: 0 auto;
  }
  .singlebutton{
      float:left;
      margin: 10px 20px 10px 20px;
  }
  .FullSize{
      color: #cccccc;
      width:100;
      opacity: 0.5;
      margin: 0px 0px 20px 0px;
      text-align: center;
  }
  .FullSize a:link {color:#cccccc;}      /* unvisited link */
  .FullSize a:visited {color:#cccccc;}  /* visited link */
  .FullSize a:hover {color:#cccccc;}  /* mouse over link */
  .FullSize a:active {color:#cccccc;}  /* selected link */
  
  .ReblogCounts
  {
      color: #cccccc;
      width:100%;
      text-align: center;
      font-family: Arial;
      font-size: 18pt;
  }
  @font-face
  {
      font-family: CodeFont;
      src: url(http://static.tumblr.com/2e5jfgm/hUPn1lp5t/code_bold.otf);
  }
  
  @font-face
  {
      font-family: SourceSansProRegular;
      src: url(http://static.tumblr.com/2e5jfgm/ww1n1nn1x/sourcesanspro-regular.otf);
  }
  @font-face
  {
      font-family: SourceSansProLight;
      src: url(http://static.tumblr.com/2e5jfgm/oIAn1np9n/sourcesanspro-light.otf);
      -webkit-font-smoothing: always;
      font-weight: normal;
      font-style: normal;
  }
  
  .permaimage{
      width: 100%
      margin: 0 auto;
      float:center;
      text-align: center;
      webkit-transform: translateX(50%);
      -moz-transform: translateX(50%);
      transform: translateX(50%);
  }
  .permaimage img{
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
  }
  .PermalinkinnerButtonsContainer{
      display: table;
      padding: 10px 0px 0px 0px;
      margin: 0 auto;
  }
  .PermalinkReblogCounts
  {
      color: #cccccc;
      float:left;
      margin: 12px 20px 10px 20px;
      text-align: left;
      font-family: Arial;
      font-size: 12pt;
  }
  
  
  
  {CustomCSS}
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  &lt;div id="entirety"&gt;
  &lt;div id="menu"&gt;
      &lt;div id="headerBg"&gt;
          &lt;div id="whiteMask"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="menuStripe"&gt;
          &lt;div class="menuContentContainer"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="{BlogURL}"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="{BlogURL}tagged/technology"&gt;Technology&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="{BlogURL}tagged/menswear"&gt;Menswear&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="{BlogURL}tagged/archytecture"&gt;Archytecture&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="{BlogURL}tagged/interiour"&gt;Interiour design&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="{BlogURL}tagged/inspirative"&gt;Inspirative&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="{BlogURL}tagged/girls"&gt;Girls&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="{BlogURL}tagged/cars"&gt;Cars&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
              &lt;div class="Description"&gt;{description}&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="menuButton"&gt;
              &lt;i class="fa fa-align-justify fa-fw"&gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!--END menu --&gt;
  
  &lt;div id="container"&gt;
  
  {block:Posts}    
  
  
  
  {block:Text}
  &lt;div class="post text"&gt;
  {block:Title}&lt;span class="title"&gt;{Title}&lt;/span&gt;{/block:Title}
  {Body}
  &lt;/div&gt;&lt;!--post--&gt;
  {/block:Text}
  
  {block:Photo}
  {block:IndexPage}
  &lt;div class="post pic"&gt;
  
      &lt;div class="PostCaption"&gt;
          &lt;div class="tableAlign"&gt;
          &lt;div class="LikeReblogButton"&gt;
              &lt;div class="innerButtonsContainer"&gt;
                  &lt;div class="FullSize"&gt;
                      &lt;a href="{permalink}" id="single_image" &gt;
                          &lt;i class="fa fa-arrows-alt fa-5x"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="singlebutton"&gt;
                      {LikeButton size="40"}
                  &lt;/div&gt;
                  &lt;div class="singlebutton"&gt;
                      {ReblogButton size="40"}
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="ReblogCounts"&gt;
                  {NoteCount}
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;img src="{PhotoURL-400}" alt="Illustration of Viking"&gt;
  {/block:IndexPage}
  {block:PermalinkPage}
      &lt;center&gt;
      &lt;div class="permaimage"&gt;
          &lt;img src="{PhotoURL-400}" alt="Illustration of Viking"&gt;
      &lt;/div&gt;
      &lt;div class="LikeReblogButton"&gt;
          &lt;div class="PermalinkinnerButtonsContainer"&gt;
              &lt;div class="singlebutton"&gt;
                  {LikeButton size="20"}
              &lt;/div&gt;
              &lt;div class="singlebutton"&gt;
                  {ReblogButton size="20"}
              &lt;/div&gt;
              &lt;div class="PermalinkReblogCounts"&gt;
                   {NoteCountWithLabel}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/center&gt;
  {/block:PermalinkPage}
  &lt;/div&gt;
  &lt;!--post--&gt;
  {/block:Photo}
  
  {block:Photoset}
  &lt;div class="post photoset"&gt;
  &lt;center&gt;{Photoset-400}&lt;/center&gt;
  &lt;div id="caption"&gt;
  {block:Caption}{Caption}{/block:Caption}
  &lt;/div&gt;&lt;!--END caption--&gt;
  &lt;/div&gt;&lt;!--post--&gt;
  {/block:Photoset}
  
  {block:Quote}
  &lt;div class="post text"&gt;
  &lt;span class="quote"&gt;&amp;ldquo;{Quote}&amp;rdquo;&lt;/span&gt;
  {block:Source}{Source}{/block:Source}
  &lt;/div&gt;&lt;!--post--&gt;
  {/block:Quote}
  
  {block:Link}
  &lt;div class="post text"&gt;
  &lt;a title="" href="{URL}" class="postlink" {Target}&gt;{Name}&lt;/a&gt;
  {block:Description}{Description}{/block:Description}
  &lt;/div&gt;&lt;!--post--&gt;
  {/block:Link}
  
  {block:Audio}
  &lt;div class="post audio"&gt;
  {AudioPlayerGrey}
  {block:Caption}{Caption}{/block:Caption}
  &lt;/div&gt;&lt;!--post--&gt;
  {/block:Audio}
  
  {block:Chat}
  &lt;div class="post text"&gt;
  {block:Title}&lt;span class="title"&gt;{Title}&lt;/span&gt;{/block:Title}
  &lt;ul class="chat"&gt;
      {block:Lines}
          &lt;li&gt;
              {block:Label}&lt;span class="label"&gt;{Label}&lt;/span&gt;{/block:Label}{Line}
          &lt;/li&gt;
      {/block:Lines}            
  &lt;/ul&gt;
  &lt;/div&gt;&lt;!--post--&gt;
  {/block:Chat}
  
  {block:Video}
  &lt;div class="post vid"&gt;
  &lt;center&gt;{Video-400}&lt;/center&gt;
  &lt;div id="caption"&gt;
  {block:Caption}{Caption}{/block:Caption}
  &lt;/div&gt;&lt;!--END caption--&gt;
  &lt;/div&gt;&lt;!--post--&gt;
  {/block:Video}
  
  {block:Answer}
  &lt;div class="post text"&gt;
  &lt;b&gt;{Asker} asked:&lt;/b&gt; {Question}
  &lt;p&gt;{Answer}
  &lt;/div&gt;&lt;!--post--&gt;
  {/block:Answer}   
  
  {/block:Posts}
  
  
  &lt;/div&gt;&lt;!--END container--&gt;
  
  &lt;br/&gt;
  
  {block:IndexPage}
  &lt;center&gt;
  &lt;div id="bottomnav"&gt;
      {block:PreviousPage}  
          &lt;a href="{PreviousPage}"&gt;&lt;div id="Arrow"&gt;&lt;i class="fa fa-arrow-left"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;NEWER&lt;/div&gt;&lt;/a&gt;
      {/block:PreviousPage}
  
      &lt;div id="page_count"&gt;
          &lt;font color="#9e9e9e"&gt;
          Page &lt;/font&gt;&lt;font color="#3e3e3e"&gt;{CurrentPage}&lt;/font&gt;&lt;font color="#9e9e9e"&gt; of &lt;/font&gt;&lt;font color        ="#3e3e3e"&gt;{TotalPages}&lt;/font&gt;
      &lt;/div&gt;
  
  
      {block:NextPage}
      &lt;a href="{NextPage}"&gt;&lt;div id="Arrow" &gt;OLDER&amp;nbsp;&amp;nbsp;&lt;i class="fa fa-arrow-right"&gt;&lt;/i&gt;&lt;/div&gt;&lt;/a&gt;
      {/block:NextPage}
  
  
  &lt;/div&gt;
  
  &lt;/center&gt;
  {/block:IndexPage}
  
  &lt;/div&gt;&lt;!--END entirety--&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
   var $container = $('#container');
   $container.masonry({
              itemSelector : '.post',
              columnWidth : 1,
              isAnimated: true
            });
            //menuStripe
   $(document).ready(function() {
       var toggle = false;
       console.log('start');
      $(".menuButton i").click(function() {
             if(toggle == false){
                 console.log('toggle on');
                 $(".menuStripe").css( "top", "300px" );
                 $("#menu").css( "height", "540px" ); 
                 toggle = true;
                 return;
             }
             if(toggle == true){
                 $(".menuStripe").css( "top", "90px" ); 
                 $("#menu").css( "height", "340px" ); 
                 toggle = false;
                 console.log('toggle off');
                 return;
             }
          });
      });
  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>