1
嘿家伙我是新来的Stackoverflow，我一直在HTML编码超过5个月了。我目前正在与Boostrap合作。我目前正在尝试修改this网站，我喜欢它。但我似乎无法正确对齐，如this image所示。正如你所看到的，左侧有更多的空间，右侧有更少的空间。html bootstrap无法对齐到中心
我看过其他类似问题的Stackoverflow帖子，我查看了CSS文件，并试图找到任何与保证金有关的内容并对其进行了修改，但我无法使其工作，因此我的部分正确居中。我正在使用row和span12。
基本上我试图对准部分（<section id="projects">）页面
我希望有人能帮助我的中心。 P.S这里是一个下载链接的网站
http://www.alessioatzeni.com/blog/brushed-template/
太谢谢你了:)
更新1 这是我的工作股利。我没有修改CSS
<!-- Our Work Section -->
<div id="work" class="page">
<div class="container">
<div class="row">
<div class="span12">
<div class="title-page-less-margin">
<h2 class="title">Our Work</h2>
<h3 class="title-description">Check Out Our Projects on <a href="#">Dribbble</a>.</h3>
</div>
</div>
</div>
<!-- Portfolio Projects -->
<div class="span12">
<div class="row">
<div class="title-page-less-margin">
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<a href="#filter" data-option-value="*" class="selected">All Projects</a>
<a href="#filter" data-option-value=".design">Design</a>
<a href="#filter" data-option-value=".photography">Photography</a><
<a href="#filter" data-option-value=".video">Video</a>
</ul>
</nav>
</div>
<section id="projects">
<ul id="thumbs">
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 design">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" href="_include/img/work/full/image-01-full.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-01.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis. hihihi">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 design">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Office" href="_include/img/work/full/image-02-full.jpg"></a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-02.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 photography">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Mountains" href="_include/img/work/full/image-03-full.jpg"></a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-03.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 video">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Video Content From Vimeo" href="http://vimeo.com/51460511"></a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-08.jpg" alt="Video">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 photography">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Sea" href="_include/img/work/full/image-04-full.jpg"></a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-04.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 photography">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Clouds" href="_include/img/work/full/image-05-full.jpg"></a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-05.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 video">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Video Content From Vimeo" href="http://vimeo.com/50834315"></a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-09.jpg" alt="Video">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 design">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Dark" href="_include/img/work/full/image-06-full.jpg"></a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-06.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 design">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Beach" href="_include/img/work/full/image-07-full.jpg"></a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-07.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
<!-- End Item Project -->
</ul>
</section>
</div>
</div>
<!-- End Portfolio Projects -->
<!-- End Title Page -->
</div>
</div>
什么是你想准确对齐？ – Srax
@Srax对不起，我应该提到这一点。我正在尝试对齐图像，使得'section'带有id'projects' – noobthatsnew
您能否提供HTML和CSS，会让它更容易帮助您。 – Srax