尝试居中对齐列表项

Question

我尝试过margin：0 auto和text-align瞄准各种元素，但无法将图片库放到中心...我应该使用什么CSS组合以及div，ul或li必须我的目标是什么？

这是HTML：

<ul class="loop">
    <ul id="portfolio-filter"><li><a href="#all" title="" class="current">All</a></li><li><a href="#design" title="" rel="design">design</a></li><li><a href="#mobile" title="" rel="mobile">mobile</a></li><li><a href="#web" title="" rel="web">web</a></li></ul> <ul id="portfolio-list">

    <li class="fourcol rad_big mobile" style="">

        <div class="item_full item_height1">

            <div class="imgwrap">

                    <span class="cats"><h3><a href="http://zappend.com/myportfolio/another-mobile-project/">Another mobile project</a></h3>
                    <p>history app</p>
                    </span>

                    <a href="http://zappend.com/myportfolio/another-mobile-project/">

                        <img width="300" height="199" src="http://zappend.com/wp-content/uploads/2013/11/bg-300x199.jpg" class="attachment-folio wp-post-image" alt="bg" title="" style="opacity: 1;">                        
                    </a>

            </div>  

            <div style="clear:both"></div>

            <a class="hoverstuff-zoom" rel="prettyPhoto[gallery]" href="http://zappend.com/wp-content/uploads/2013/11/bg.jpg" style="opacity: 0;"><i class="icon-fullscreen"></i></a>
            <a class="hoverstuff-link" href="http://zappend.com/myportfolio/another-mobile-project/" style="opacity: 0;"><i class="icon-signout"></i></a>

        </div>          </li>


    <li class="fourcol rad_big design" style="">

        <div class="item_full item_height1">

            <div class="imgwrap">

                    <span class="cats"><h3><a href="http://zappend.com/myportfolio/design-project-1/">Design Project 1</a></h3>
                    <p>city of birmingham HDR</p>
                    </span>

                    <a href="http://zappend.com/myportfolio/design-project-1/">

                        <img width="300" height="199" src="http://zappend.com/wp-content/uploads/2013/11/city-300x199.jpg" class="attachment-folio wp-post-image" alt="city" title="" style="opacity: 1;">                        
                    </a>

            </div>  

            <div style="clear:both"></div>

            <a class="hoverstuff-zoom" rel="prettyPhoto[gallery]" href="http://zappend.com/wp-content/uploads/2013/11/city.jpg" style="opacity: 0;"><i class="icon-fullscreen"></i></a>
            <a class="hoverstuff-link" href="http://zappend.com/myportfolio/design-project-1/" style="opacity: 0;"><i class="icon-signout"></i></a>

        </div>          </li>


    <li class="fourcol rad_big web" style="">

        <div class="item_full item_height1">

            <div class="imgwrap">

                    <span class="cats"><h3><a href="http://zappend.com/myportfolio/website-project/">Website Project</a></h3>
                    <p>zappend website</p>
                    </span>

                    <a href="http://zappend.com/myportfolio/website-project/">

                        <img width="300" height="199" src="http://zappend.com/wp-content/uploads/2013/11/main-slider-300x199.jpg" class="attachment-folio wp-post-image" alt="main-slider" title="" style="opacity: 1;">                        
                    </a>

            </div>  

            <div style="clear:both"></div>

            <a class="hoverstuff-zoom" rel="prettyPhoto[gallery]" href="http://zappend.com/wp-content/uploads/2013/11/main-slider.jpg" style="opacity: 0;"><i class="icon-fullscreen"></i></a>
            <a class="hoverstuff-link" href="http://zappend.com/myportfolio/website-project/" style="opacity: 0;"><i class="icon-signout"></i></a>

        </div>          </li>


    <li class="fourcol rad_big mobile" style="">

        <div class="item_full item_height1">

            <div class="imgwrap">

                    <span class="cats"><h3><a href="http://zappend.com/myportfolio/mobile-app/">Mobile App</a></h3>
                    <p>Zappend App</p>
                    </span>

                    <a href="http://zappend.com/myportfolio/mobile-app/">

                        <img width="300" height="199" src="http://zappend.com/wp-content/uploads/2013/11/mobile-app-slider-300x199.png" class="attachment-folio wp-post-image" alt="mobile-app-slider" title="" style="opacity: 1;">                        
                    </a>

            </div>  

            <div style="clear:both"></div>

            <a class="hoverstuff-zoom" rel="prettyPhoto[gallery]" href="http://zappend.com/wp-content/uploads/2013/11/mobile-app-slider.png" style="opacity: 0;"><i class="icon-fullscreen"></i></a>
            <a class="hoverstuff-link" href="http://zappend.com/myportfolio/mobile-app/" style="opacity: 0;"><i class="icon-signout"></i></a>

        </div>          </li>

    </ul>
</ul>

Answer 1

你知道怎么还能把桌子放在桌子上吗？ 好吧，我昨天遇到了这个问题，我只是将我的东西放在一张桌子中并居中（但这只是短期而且在移动浏览器上看起来很糟糕。啊哈，但是你可以用一些css设置你的保证金0自动css到重要..有时其他css将通过html文件中的css呈现。这就是为什么将它存储在其他地方并且它看起来更好的原因..无论如何检查是否这是加载您的网站在一个漂亮的浏览器像铬然后右键单击并选择检查元素并单击受影响的图像，查看正在运行的css以及什么不是..

检查这个中心的东西，它实际上真的很好啊哈/

Code Pen