尝试居中对齐列表项

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 呈现。这就是为什么最好将它存储在其他地方并且看起来更好.. 无论如何要检查它是否是这样在像 chrome 这样的不错的浏览器中加载您的网站然后右键单击并选择检查元素，然后单击受影响的图像，查看正在运行的 css 和未运行的 css..

看看这个关于中心化的东西真的很好啊哈

Code Pen