引导投资组合项目未居中

Posted 2023-03-29

【中文标题】引导投资组合项目未居中

【英文标题】：Boostrap portfolio items not centered

【发布时间】：2018-03-24 12:19:36

【问题描述】：

嘿嘿！

我正在开发一个 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"  
                  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"  
                        class="img-responsive">
                    </a>
                </figure>
            </li>
    </ul> <!--end portfolio grid -->
    
    
          </div> <!--end row -->
        </div> <!-- end container-->
    </section>
     

【参考方案1】：

引导元素（例如 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/

【参考方案2】：

enter image description here

对不起。这是屏幕的图片

【参考方案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"  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"  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"  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"  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"  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"  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"  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"  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"  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 像素顶部。这只是您提供的站点链接的开始。