html - 尝试居中对齐列表项

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

大声笑，你知道怎样才能让 table 居中吗？ 好吧，我昨天遇到了这个问题，我只是把我的东西放在一个表中并将它居中(但这只是短期的，在移动浏览器上看起来很糟糕。啊哈但是是的你可以用一些 css 来做到这一点将你的 margin 0 auto css 设置为 important .. 有时其他 css 会在 html 文件中的 css 上呈现。这就是为什么最好将它存储在其他地方并且它看起来更好.. 无论如何检查它是否在像 chrome 这样的漂亮浏览器中加载您的网站然后右键单击并选择检查元素并单击受影响的图像并查看正在运行的 css 和未运行的 ..

检查一下关于居中的东西它真的很好啊哈

Code Pen