Html 将图像居中放置在div中？？CSS混乱

不确定图像为什么不居中：

.container{边距：0自动；宽度：90%；填充：0；溢出：隐藏；}
.container中心{边距：0自动；宽度：299px；填充：0；溢出：隐藏；}
.container主题{宽度：100%；边距：0自动；}
.topic tracker{float:左；宽度：100%；边框顶部：4px实心#000；背景色：#a80500；}
.topic tracker.nfl{背景色：#005496；}
.topic tracker.mlb{背景色：#cc9866；}
.topic tracker h2{背景：透明url（img/sn logo.png）无重复0 5px；字体大小：12px；颜色：#fff；字体样式：斜体；填充：3px 0 3px 16px；页边距底部：1px；}
.topic tracker info{float:left；宽度：100%；高度：140px；背景：透明url（img/topic bg.gif）repeat-x 0；}
.topic tracker info ul{float:左；宽度：100%；填充：5px 0；}
.topic tracker info ul li{float:左；宽度：30%；文本对齐：居中；边距：0自动；}
.topic tracker info ul li a{font size:12px；font-weight:bold；color:#000；行高：1.1；边距：0 auto；}
.topic tracker info ul li.mid{margin:0 8px；}
.topic tracker info ul li img{浮点：左；宽度：93px；边距：0 0 2px 0；清除：右；边距：0自动；}
.topic tracker info ul li p{clear:两者；}
.趋势导航{浮动：左；页边距顶部：10px；宽度：100%；}
.trend nav a{float:左；颜色：#4e4e；字体大小：11px；字体重量：粗体；}
.trend nav a.prev{width:40%；float:left；文本对齐：left；padding left:13px；背景：透明url（img/arrow prev.png）不重复0 1px；}
.trend nav a.next{width:18%；float:right；文本对齐：right；padding right:13px；背景：透明url（img/arrow next.png）无重复右1px；}
.trend nav p.pages，#wrapper.trend nav a.pages{float:left；宽度：20%；高度：16px；边距：0自动；填充顶部：2px；背景：透明url（img/pages_bg.png）无重复居中；文本对齐：居中；字体大小：10px；颜色：#000；字体重量：正常；}

试试这个：

//HTML：








//CSS:
.container{边距：0自动；宽度：90%；填充：0；溢出：隐藏；}
.container中心{边距：0自动；宽度：299px；填充：0；溢出：隐藏；}
.container主题{宽度：100%；边距：0自动；}
.topic tracker{float:左；宽度：100%；边框顶部：4px实心#000；背景色：#a80500}
.topic tracker.nfl{背景色：#005496；}
.topic tracker.mlb{背景色：#cc9866；}
.topic tracker h2{背景：透明url（img/sn logo.png）无重复0 5px；字体大小：12px；颜色：#fff；字体样式：斜体；填充：3px 0 3px 16px；页边距底部：1px；}
.topic tracker信息{宽度：100%；高度：140px；背景：透明url（img/topic bg.gif）repeat-x 0 0；左边距：自动；右边距：自动；}
.topic tracker info ul{float:左；宽度：100%；填充：5px 0；}
.topic tracker info ul li{float:左；宽度：30%；文本对齐：居中；边距：0自动；}
.topic tracker info ul li a{font size:12px；font-weight:bold；color:#000；行高：1.1；边距：0 auto；}
.topic tracker info ul li.mid{margin:0 8px；}
.topic tracker info ul li img{宽度：93px；边距：0 2px 0；清除：右侧；；边距：0自动；}
.topic tracker info ul li p{clear:两者；}
.趋势导航{浮动：左；页边距顶部：10px；宽度：100%；}
.trend nav a{float:左；颜色：#4e4e；字体大小：11px；字体重量：粗体；}
.trend nav a.prev{width:40%；float:left；文本对齐：left；padding left:13px；背景：透明url（img/arrow prev.png）不重复0 1px；}
.trend nav a.next{width:18%；float:right；文本对齐：right；padding right:13px；背景：透明url（img/arrow next.png）无重复右1px；}
.trend nav p.pages，#wrapper.trend nav a.pages{float:left；宽度：20%；高度：16px；边距：0自动；填充顶部：2px；背景：透明url（img/pages_bg.png）无重复居中；文本对齐：居中；字体大小：10px；颜色：#000；字体重量：正常；}
​

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

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

这使我的图像居中。

因为你有

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

---

删除此属性或用float:none覆盖后，还应添加文本align:center；对于您的div.container-topic

这应该是您需要的所有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; }

概述：

• 第一行只是将字体大小设置得足够小，以便JSFIDLE…可以删除
• 第二行清除李的浮动
• 第三行浮动li的左侧，添加一些边距和填充，并以px值设置宽度
• 第四行将链接设置为块元素，这意味着它们将占据li的所有宽度，然后我将文本对齐设置为居中，这将居中放置所有元素

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

.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; }