ボックスを中央に等分に配置する

• 

  千葉の見どころ

• 

  千葉さんぽ

• 

  千葉のお気に入り写真

• 

  川廻し

コード

<!-- ボックスを中央に等分に配置する -->
<style type="text/css">
  ul {
    width: 80%;
    margin:0 auto;
    font-size: 0;  // 重要
  }
  li {
    display: inline-block;
    vertical-align: top;
    width:25%;
  }
  .li-inner {
    margin: 5px;
    padding: 5px;
    background-color: #FFFF66;
  }
  .li-inner img {
    width: 100%;
  }
</style>

  <ul>
    <li>
      <div class="li-inner">
          <p><img src="http://static.flickr.com/2811/33882567116_e11e73a848.jpg"></p>
          <h2>千葉の見どころ</h2>
      </div>
    </li>
    <li>
      <div class="li-inner">
          <p><img src="http://static.flickr.com/299/32449635775_fdcf5c2f5f.jpg"></p>
          <h2>千葉さんぽ</h2>
      </div>
    </li>
    <li>
      <div class="li-inner">
          <p><img src="http://static.flickr.com/3935/33780407561_012ee36232.jpg"></p>
          <h2>千葉のお気に入り写真</h2>
      </div>
    </li>
    <li>
      <div class="li-inner">
          <p><img src="http://s10-4bn.sunnyday.jp/kawamawashi/kaikonbanotaki/_img/00.jpg"></p>
          <h2>川廻し</h2>
      </div>
    </li>
  </ul>