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，但这也无效。

这是小提琴：https://jsfiddle.net/nf5hghqy/10/（在IE中打开）

我们能解决这个问题吗？

Answer 1

不推荐使用

<center>代码（请参阅here）

此标记已在HTML 4（和XHTML 1）中弃用，以支持   CSS text-align属性，可应用于元素或   个人

。对于居中块，请使用其他CSS属性   如margin-left和margin-right并将它们设置为auto（或设置margin）   到0自动）。

要获得img对齐的中心，您必须设置display:block（因为img默认为inline元素）和margin:auto

另一个错误，img是一个自动结束标记，因此无法执行此操作<img></img>

请参阅以下代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

更新 - 基于OP的新小提琴：

你的问题在这里：

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

Answer 2

首先检查您是否添加了 doctype 中心标记在IE中不起作用，您可以将CSS用作text-align: center，将auto用于边距，然后它将在IE中正常工作。更好here

Answer 3

来自http://www.w3.org/Style/Examples/007/center.en.html#block：

.containerImg img{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

重要的是确保图像是块元素;这样它有宽度。 margin-left和margin-right设置为自动根据块元素图像的宽度自动设置边距，使图像居中。

Answer 4

试试这个。

.containerImg img{
     margin:auto;
     display:block
}

Answer 5

你需要删除标签并添加一些css作为单独的文件或在线并使用margin：auto;而不是你的左边距和右边距

<center>标记在IE中不起作用

5 个答案: