html - <center> 标签在 IE 中不起作用

Question

问题是将图像对齐到 div 的中心。这在 chrome 中正常工作，除了 IE

<DIV id="content"><P>Internal resources </P>
 <DIV class="containertop">
   <P>External resources </P> 
 </DIV>
 <DIV class="contentcontainer">
 <DIV class="containerImg">
    <img height="286" width="381" src="http://www.bestwestern.com/img/bg-groups-meetings.png" /alt="Banner Image" title="Banner Image"></img>

</DIV>
</DIV>
</DIV>

CSS:

 .containerImg Img { 
   border: 0 none;
   padding: 0px !important;
   margin: 0px;
   width: 368px;
   height: 277px;
   margin-left: auto;
   margin-right: auto;
   display: block;
}

#content .contentcontainer { 
float:left;
padding: 5px 10px 0 0;
margin: 1px 0 0 0px;
}

#content .containertop {
padding-top: 15px;
color: #999;
}

div#content {
 font: normal 12px/1.6em arial;
 font-size: 12px;
 color: #666;
 width: 471px;
 padding: 10px 10px 0 10px;
 margin: 0;
 background-color: #fff;
 min-height: 100%;
 height: 100%;
 background-color: #fff !important;
 min-height: 100% !important;
 height: 100%;
 }

我删除了标签并在 CSS 之上进行了尝试，但同样无效。

这是 fiddle :https://jsfiddle.net/nf5hghqy/10/ (在IE中打开)

我们能解决这个问题吗？

Answer 1

<center>标签已弃用(参见 here )

This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the CSS text-align property, which can be applied to the element or to an individual

. For centering blocks, use other CSS properties like margin-left and margin-right and set them to auto (or set margin to 0 auto).

获取img对齐中心你必须设置它display:block (因为 img 默认是一个 inline 元素)和 margin:auto

另一个错误，img是一个自关闭标签，所以你不能这样做<img></img>

请参阅下面的代码段:

div {
  border: 1px solid red /*demo purposes */
}
img {
  display: block;
  margin: auto;
}

<div class="containerImg">
  <img src="http://www.bestwestern.com/img/bg-groups-meetings.png" alt="Banner Image" title="Banner Image" />
</div>

更新 - 基于 OP 的新 fiddle :

你的问题在这里:

#content .contentcontainer { 
  float:left;
  padding: 5px 10px 0 0;
  margin: 1px 0 0 0px;
}

只需删除 float:left ，像这样:

#content .contentcontainer { 
  padding: 5px 10px 0 0;
  margin: 1px 0 0 0px;
}