HeJ小鼠！
我正在开发一个boostrap图片库，它应该可以随机播放图像项目：http://demo.acasaprogramming.ro/shuffle-portfolio/#。
现在我只是想让画廊工作，没有随机播放功能，但我遇到了一个花了很多时间试图解决的问题。
我的画廊中的项目有点被推到一边，我尝试了很多东西，包括：text-align：center。将填充设置为四面都相同，margin-right：auto; margin-left：auto; ....我不知道我做错了什么..
我附上了picture or my screen并且如图所示，左侧的图像一直到边框 - 我想要容器中间的所有物品：/
我添加了我的html文档的一小部分 - 希望这已经足够了（所有图片都是相同的代码）
body
{
background-color: #f1f5f8;
border-top: 10px solid #2980b9;
}
.portfolio
{
margin: 48px 0;
}
.portfolio-sorting
{
text-transform: uppercase;
font-size: 16px;
margin-bottom: 48px;
}
.portfolio-sorting li a
{
color: #000000;
text-decoration: none;
padding: 6px;
}
.portfolio-sorting li a:hover,
.portfolio-sorting li a.active
{
color: #2980b9;
border-bottom: 2px solid #2980b9;
}<section class="portfolio">
<div class="container">
<div class="row">
<ul class="portfolio-sorting list-inline text-center">
<li><a href="#" data-group="all" class="active">All</a></li>
<li><a href="#" data-group="people">People</a></li>
<li><a href="#" data-group="simpsons">Simpsons</a></li>
<li><a href="#" data-group="futurama">Futurama</a></li>
</ul> <!--end portfolio sorting -->
<ul class="portfolio-items list-unstyled" id="grid">
<li class="col-md-4 col-sm-4 col-xs-6" data-groups='["people"]'>
<figure class="portfolio-item">
<a href="#">
<img src="http://lorempixel.com/700/400/people/1" alt="Item 1"
class="img-responsive">
</a>
</figure>
</li>
<li class="col-md-4 col-sm-4 col-xs-6" data-groups='["people"]'>
<figure class="portfolio-item">
<a href="#">
<img src="http://lorempixel.com/700/400/people/7" alt=""
class="img-responsive">
</a>
</figure>
</li>
</ul> <!--end portfolio grid -->
</div> <!--end row -->
</div> <!-- end container-->
</section>
答案 0 :(得分：0)
对不起。这是屏幕的图片
答案 1 :(得分：0)
Bootstrap元素（例如col-xs-4）具有 float 属性，默认设置为左。
您必须将 float：none 和 display：inline-block 设置为这些元素。
父母的文本对齐中心：
.portfolio-items {
text-align: center;
}
.portfolio-items > li {
display: inline-block;
float: none;
}
答案 2 :(得分：0)
您的问题在于中心列和3d翻译。
<ul class="portfolio-items center-block list-unstyled shuffle" id="grid" style="position: relative; overflow: hidden; height: 707.109px; transition: height 250ms ease-out;">
<li class="col-md-4 col-sm-4 center-block col-xs-6 shuffle-item filtered" data-groups="["people"]" style="position: absolute; top: 0px; left: 0px; visibility: visible; transition: transform 250ms ease-out, opacity 250ms ease-out; opacity: 1; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);">
<figure class="portfolio-item">
<a href="#">
<img src="http://lorempixel.com/700/400/people/1" alt="Item 1" class="img-responsive">
</a>
</figure>
</li>
<li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="["people"]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(390px, 0px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;">
<figure class="portfolio-item">
<a href="#">
<img src="http://lorempixel.com/700/400/people/7" alt="" class="img-responsive">
</a>
</figure>
</li>
<li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="["futurama"]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(780px, 0px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;">
<figure class="portfolio-item">
<a href="#">
<img src="http://lorempicsum.com/futurama/700/400/1" alt="" class="img-responsive">
</a>
</figure>
</li>
<li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="["futurama"]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(390px, 0px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;">
<figure class="portfolio-item">
<a href="#">
<img src="http://lorempicsum.com/futurama/700/400/2" alt="" class="img-responsive">
</a>
</figure>
</li>
<li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="["simpsons", "people"]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(0px, 236px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;">
<figure class="portfolio-item">
<a href="#">
<img src="http://lorempicsum.com/simpsons/700/400/1" alt="" class="img-responsive">
</a>
</figure>
</li>
<li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="["simpsons"]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(780px, 236px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;">
<figure class="portfolio-item">
<a href="#">
<img src="http://lorempicsum.com/simpsons/700/400/3" alt="" class="img-responsive">
</a>
</figure>
</li>
<li class="col-md-4 center-blockcol-sm-4 col-xs-6 shuffle-item filtered" data-groups="["people"]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(390px, 266px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;">
<figure class="portfolio-item">
<a href="#">
<img src="http://lorempixel.com/700/400/people/9" alt="" class="img-responsive">
</a>
</figure>
</li>
<li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="["simpsons"]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(390px, 236px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;">
<figure class="portfolio-item">
<a href="#">
<img src="http://lorempicsum.com/simpsons/700/400/4" alt="" class="img-responsive">
</a>
</figure>
</li>
<li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="["futurama"]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(0px, 471px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;">
<figure class="portfolio-item">
<a href="#">
<img src="http://lorempicsum.com/futurama/700/400/5" alt="" class="img-responsive">
</a>
</figure>
</li>
<!-- sizer -->
<li class="col-md-4 col-sm-4 col-xs-6 shuffle_sizer shuffle-item filtered" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(780px, 471px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"></li>
</ul>
你的两列上有额外的30像素顶部和60像素顶部。这只是您提供的网站链接的开始。