試圖居中對齊列表項目

Question

我試過保證金：0自動和文本對齊定位各種元素，但無法獲得圖像的圖庫中心...我應該使用什麼樣的CSS組合和什麼div ，我是否必須定位？

下面是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正在運行什麼心不是..

檢查了這一點上centrering東西自己居然真的很好啊哈

Code Pen