Twitter Bootstrap 缩略图对齐问题

Question

我在Twitter Bootstrap中对齐缩略图遇到了问题：

1. 我正在使用流体布局
2. 我的缩略图大小为183 x 154像素
3. 我想要使用固定的图像尺寸，但是可变的边距，并且缩略图完美地对齐在它们所在的区域内。

这是我目前得到的结果：

http://i.stack.imgur.com/1qUA6.png

正如您所注意到的; 图片靠左对齐过多。 缩略图的包装如下：

 <div class="row-fluid">
     <div class="span6">

我的 HTML：

  <ul id="nwthumbs">
     <li><a href="#" ><img src="Fernando-Alonso-Ferrari-3_2799133.jpg"><h2><span>Fernando Alonso has credited Ferrari's decision to stop for a new set of we...</span></h2></a>
      <button class="btn btn-mini" type="button" >Read More</button></li>
      <li><a href="#" ><img src="Sir-Alex-Ferguson_2794602.jpg">
          <h2><span data-bind="html: titleShortened">Sir Alex Ferguson says there is 'no chance' of Manchester United repeating ...</span></h2></a><button class="btn btn-mini" type="button" >Read More</button></li><li><a href="#" ><img src="Paul-Bohan-2012_2799199.jpg">
 <h2><span>Local Hero claimed a first victory of the year with a determined effort in ...</span>
      </h2> </a><button class="btn btn-mini" type="button" >
                                        Read More</button>
                                </li>
              <li><a href="#" ><img src="Douglas_2675905.jpg">
      <h2><span>FC Twente chairman Joop Munsterman admits he is unsure whether Newcastle Un...</span></h2> </a><button class="btn btn-mini" type="button" >
                                        Read More</button>
                                </li>
                                <li><a href="#" >
                  <img src="Darryl-Westlake-Walsall_2465450.jpg">
                                    <h2>
      <span>Sheffield United have confirmed the signing of promising defender Darryl We...</span>
                                    </h2>
                                </a>
                                    <button class="btn btn-mini" type="button" >
                                        Read More</button>
                                </li>
   </ul>

我正在使用Twitter Bootstrap。

目前我尝试过的方法是将图片设置为可变大小，宽度为100％，高度为100％，这样做是有效的，但当缩小视口时，它会调整图片大小而不是将图片包装在两列中显示。

- user1519280

Answer 1

Try with this CSS :

#nwthumbs {
  text-align:center;
}

#nwthumbs > li {
    display: inline-block;
    *display:inline; /* ie7 fix */
    float: none; /* this is the part that makes it work */
}

- Justin D.

---

哇，让我印象深刻，就这样了！！ - user1519280

我在一两周前遇到了同样的问题，并在网上找到了这个答案。虽然我不记得具体在哪里找到的，但很高兴能帮助到你！ :) - Justin D.