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