将图像置于div中心？ CSS混乱

时间：2011-02-22 19:32:03

标签： html 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;}

4 个答案:

答案 0 :(得分：3)

尝试从图像中删除float：left：

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

这使我的图像居中。

答案 1 :(得分：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;}
​

答案 2 :(得分：0)

因为你有

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

删除此属性后，或使用float：none覆盖它，您还应该添加text-align：center;到你的div.container-topic

答案 3 :(得分：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的左边，添加一些边距和填充，并设置宽度为px值
  • 第四行设置了阻止元素的链接，这意味着它们将占用所有LI的宽度，然后我将text-align设置为center，将所有内容集中在！
    • 中
相关问题
最新问题