title: CSS: how to make margin: 0px auto work
body: <p>I am trying to center images inside another block:</p>
  
  <p>The html code looks like this:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;       
      &lt;a href="/article/japanese-culture-one/"&gt;
      &lt;img src="/site_media/upload/fushimi-inari-fox_jpg_200x200_q85.jpg"
      alt="Лисица Инари - один из мифических
      персонажей культа синто"/&gt; &lt;/a&gt; &lt;br /&gt;
      &lt;a href="/article/japanese-culture-one/"
      class="article_title"&gt;История и
      культура Японии. Часть Первая&lt;/a&gt;
      &lt;p&gt;Изолированная от остального мира
      Япония породила действительно
      уникальную культуру, удивляющую
      западного человека своей непохожестью
      и вдохновляющую своей красотой.
      История и культура Японии, живущей по
      своим ...&lt;/p&gt; &lt;/li&gt; .....
  &lt;/ul&gt;
  </code></pre>
  
  <p>What I want to do is to place the image in the center of li. (see <a href="http://img.skitch.com/20091128-xf36n8ekhpxyi5rdgnuqrtw36a.png" rel="nofollow noreferrer">http://img.skitch.com/20091128-xf36n8ekhpxyi5rdgnuqrtw36a.png</a>)</p>
  
  <p>The css looks this way:</p>
  
  <pre><code>ul#related{
      list-style:none;
      margin-top: 280px;
  }
  
  ul#related li{
      float:left;
      width:30%;
      height: 500px;
      margin:5px;
  }
  
  ul#related li a img{
      border:1px solid #E3E3E3;
      padding:2px;
      height: 190px;
      width: 190px;
      text-align: center;
  
  }
  </code></pre>
  
  <p>Complete code may be accessed on the site: <a href="http://j-in.org.ua/article/art/" rel="nofollow noreferrer">http://j-in.org.ua/article/art/</a></p>
  
  <p>Thanks in advance!</p>