2011-02-22 50 views
2

不知道爲什麼圖像不會中心:在一個div中居中一個圖像? CSS混亂

http://jsfiddle.net/xtian/BEXDG/

<div class="topic-tracker-info"> 
     <div class="container"> 
      <ul> 
       <li> 
        <a href="#"> 
         <div class="container-topic"> 
          <img src="http://demo.omnigon.com/christian_bovine/snmobile/img/topic-1.jpg" alt=""> 
          <p>2011 NFL DRAFT</p> 
         </div> 
        </a> 
       </li> 
       <li class="mid"> 
        <a href="#"> 
         <img src="http://demo.omnigon.com/christian_bovine/snmobile/img/topic-2.jpg" alt=""> 
         <p>NFL Labor Dispute</p> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <img src="http://demo.omnigon.com/christian_bovine/snmobile/img/topic-3.jpg" alt=""> 
         <p>NHL TRADE DEADLINE</p> 
        </a> 
       </li> 
      </ul> 
      <div class="trend-nav"> 
       <a class="prev" href="#">PREVIOUS</a> 
       <a href="#" class="pages"><b>LATEST</b></a> 
       <a href="#" class="next">NEXT</a> 
      </div> 
     </div> 
    </div> 


.container{margin: 0 auto;width:90%;padding:0;overflow: hidden;} 
.container-center{margin: 0 auto;width:299px;padding:0;overflow: hidden;} 
.container-topic{width:100%; margin:0 auto;} 
.topic-tracker {float:left; width:100%; border-top:4px solid #000;background-color: #a80500;} 
.topic-tracker.nfl{background-color:#005496;} 
.topic-tracker.mlb{background-color:#cc9866;} 
.topic-tracker h2{background:transparent url(img/sn-logo.png) no-repeat 0 5px; font-size:12px; color:#fff; font-style: italic;padding: 3px 0 3px 16px; margin-bottom:1px;} 
.topic-tracker-info{float:left;width:100%;height:140px;background:transparent url(img/topic-bg.gif) repeat-x 0 0; } 
.topic-tracker-info ul{float:left;width:100%;padding:5px 0 0 0;} 
.topic-tracker-info ul li{float:left;width:30%;text-align:center;margin: 0 auto;} 
.topic-tracker-info ul li a{font-size:12px; font-weight: bold; color:#000;line-height: 1.1;margin:0 auto;} 
.topic-tracker-info ul li.mid{margin:0 8px;} 
.topic-tracker-info ul li img{float:left;width:93px;margin:0 0 2px 0;clear:right;margin: 0 auto;} 
.topic-tracker-info ul li p{clear:both;} 

.trend-nav{float:left;margin-top:10px;width:100%;} 
.trend-nav a{float:left; color:#4e4e4e; font-size: 11px; font-weight: bold;} 
.trend-nav a.prev{width:40%;float:left;text-align: left;padding-left:13px;background: transparent url(img/arrow-prev.png) no-repeat 0 1px;} 
.trend-nav a.next{width:18%;float:right;text-align: right;padding-right:13px;background: transparent url(img/arrow-next.png) no-repeat right 1px;} 
.trend-nav p.pages, #wrapper .trend-nav a.pages{float:left;width:20%;height:16px;margin:0 auto;padding-top:2px;background:transparent url(img/pages_bg.png) no-repeat center center; text-align:center;font-size:10px; color:#000;font-weight: normal;} 

回答

3

嘗試刪除浮動:

.topic-tracker-info ul li img{width:93px;margin:0 0 2px 0;clear:right;margin: 0 auto;} 
:從圖像中左

那集中了爲我的圖像。

0

試試這個:http://jsfiddle.net/BEXDG/5/

// HTML: 
<div class="topic-tracker-info"> 
      <div class="container"> 
       <ul> 
        <li> 
         <a href="#"> 
          <div class="container-topic"> 
           <img src="http://demo.omnigon.com/christian_bovine/snmobile/img/topic-1.jpg" alt=""> 
           <p>2011 NFL DRAFT</p> 
          </div> 
         </a> 
        </li> 
        <li class="mid"> 
         <a href="#"> 
          <img src="http://demo.omnigon.com/christian_bovine/snmobile/img/topic-2.jpg" alt=""> 
          <p>NFL Labor Dispute</p> 
         </a> 
        </li> 
        <li> 
         <a href="#"> 
          <img src="http://demo.omnigon.com/christian_bovine/snmobile/img/topic-3.jpg" alt=""> 
          <p>NHL TRADE DEADLINE</p> 
         </a> 
        </li> 
       </ul> 
       <div class="trend-nav"> 
        <a class="prev" href="#">PREVIOUS</a> 
        <a href="#" class="pages"><b>LATEST</b></a> 
        <a href="#" class="next">NEXT</a> 
       </div> 
      </div> 
     </div> 

// CSS: 
.container{margin: 0 auto;width:90%;padding:0;overflow: hidden;} 
.container-center{margin: 0 auto;width:299px;padding:0;overflow: hidden;} 
.container-topic{width:100%; margin:0 auto;} 
.topic-tracker { float:left; width:100%; border-top:4px solid #000;background-color: #a80500} 
.topic-tracker.nfl{background-color:#005496;} 
.topic-tracker.mlb{background-color:#cc9866;} 
.topic-tracker h2{background:transparent url(img/sn-logo.png) no-repeat 0 5px; font-size:12px; color:#fff; font-style: italic;padding: 3px 0 3px 16px; margin-bottom:1px;} 
.topic-tracker-info{width:100%;height:140px;background:transparent url(img/topic-bg.gif) repeat-x 0 0; margin-left:auto; margin-right:auto;} 
.topic-tracker-info ul{float:left;width:100%;padding:5px 0 0 0;} 
.topic-tracker-info ul li{float:left;width:30%;text-align:center;margin: 0 auto;} 
.topic-tracker-info ul li a{font-size:12px; font-weight: bold; color:#000;line-height: 1.1;margin:0 auto;} 
.topic-tracker-info ul li.mid{margin:0 8px;} 
.topic-tracker-info ul li img{width:93px;margin:0 0 2px 0;clear:right;;margin: 0 auto;} 
.topic-tracker-info ul li p{clear:both;} 
.trend-nav{float:left;margin-top:10px;width:100%;} 
.trend-nav a{float:left; color:#4e4e4e; font-size: 11px; font-weight: bold;} 
.trend-nav a.prev{width:40%;float:left;text-align: left;padding-left:13px;background: transparent url(img/arrow-prev.png) no-repeat 0 1px;} 
.trend-nav a.next{width:18%;float:right;text-align: right;padding-right:13px;background: transparent url(img/arrow-next.png) no-repeat right 1px;} 
.trend-nav p.pages, #wrapper .trend-nav a.pages{float:left;width:20%;height:16px;margin:0 auto;padding-top:2px;background:transparent url(img/pages_bg.png) no-repeat center center; text-align:center;font-size:10px; color:#000;font-weight: normal;} 
​ 
0

,因爲你有

.topic-tracker-info ul li img { 
    float:left; 
} 

一旦你刪除此屬性,或者使用float覆蓋它:沒有,你還應該添加文本對齊:中心;您div.container話題

0

這應該是所有您需要的CSS:

.topic-tracker-info { font-size:10px; } 
.topic-tracker-info ul { overflow:hidden; } 
.topic-tracker-info ul li { float:left; margin-right:10px; padding-right:10px; width:125px; } 
.topic-tracker-info li a { display:block; text-align:center; } 

概述:

  • 第一行只設置字體大小的jsfiddle足夠小...可以刪除
  • 第二行清除li的浮點數
  • 第三行浮動LI的左側,添加一些邊距和填充,並設置px值的寬度
  • 第四行設置指向塊元素的鏈接,這意味着它們將佔用LI的所有寬度,然後將text-align設置爲居中的所有內容!