Bootstrap 投资组合项目未居中

Question

嘿！

我正在开发一个 boostrap 图片库，它应该能够随机播放图片项目：http://demo.acasaprogramming.ro/shuffle-portfolio/#。

现在我只是想让画廊正常工作，没有随机播放功能，但我运行遇到了一个花了很多时间试图解决的问题。

我画廊中的项目有点被推到了一边，我尝试了很多方法，包括：text-align: center。将 padding 设置为所有边都相同，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>

Answer 1

enter image description here

对不起。这是屏幕的图片

Answer 2

Bootstrap 元素（例如 col-xs-4）有 float 属性默认设置为 left.

您必须为这些元素设置 float: none 和 display: inline-block。

父级的文本居中对齐：

.portfolio-items {
    text-align: center;
}

.portfolio-items > li {
    display: inline-block;
    float: none;
}

工作示例：https://jsfiddle.net/cr29y1tc/24/

Answer 3

您的问题与中心列和 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="[&quot;people&quot;]" 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="[&quot;people&quot;]" 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="[&quot;futurama&quot;]" 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="[&quot;futurama&quot;]" 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="[&quot;simpsons&quot;, &quot;people&quot;]" 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="[&quot;simpsons&quot;]" 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="[&quot;people&quot;]" 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="[&quot;simpsons&quot;]" 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="[&quot;futurama&quot;]" 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 像素。这只是您提供的网站 link 的开始。

Bootstrap 投资组合项目未居中

Boostrap portfolio items not centered

jquery

image

center

gallery

twitter-bootstrap