我正在使用javascript（没有库）开发一个所见即所得的页面，因为它有一个相当专业的应用程序，所以它必须是定制的，而不是现成的。
令人惊讶的是，我有很长的路要走，而且它几乎是完整的，但我在正确显示方面遇到了一些困难。
我有一个div，其中包含文本和图像，图像向右浮动，因此文本在它们周围流动。
在某些地方，我需要将图像居中，因此我插入了一个div来包含它们。
下面的代码说明了这一点，它运行良好。
如果我有多个包含居中图像的div，就会出现问题，因为这些居中的div 的 ID 是相同的。
如果我将居中div 更改为类，图像不会居中，而是假设父div 的右浮动。
有什么办法可以克服这个问题吗？
具有相同 id 的多个div 有什么真正的问题吗？
我不担心支持FF以外的任何浏览器。
任何建议将不胜感激，感谢您的阅读。
暗淡的提姆：o）
#details {
width: 698px;
background-color: #FFC;
}
#details img {
float: right;
}
.centreimage img {
float: none;
}
.centreimage {
float: none;
text-align: center;
}
<div id="details">
<p>Some text here</p>
<img src="10750bath.jpg" height="166" width="250">
<p>Which flows around the image on the right</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>The next image should be centred</p>
<div><img src="10750bath.jpg" width="250" height="166" class="centreimage"></div>
<p>more text</p>
<p>more text</p>
</div>
谢谢大家的帮助。
即使我将CSS和HTML更改为一个类，图像仍然无法居中。
答案就在佩卡的线索中，而具体性是原因。
特殊性规则为 ID 提供比类更高的优先级。
"细节"div有一个ID，但"中心图像"是一个类。
我将"详细信息"的CSS更改为类（当然还有标记），它现在可以工作了。
不敢相信我花了至少 10 个小时试图解决这个问题，所以感谢大家的帮助。
（现在你知道我为什么是"昏暗的蒂姆"）：o）
是的，拥有具有相同 id 的多个div 是无效的。
使用类应该可以正常工作：
div.details {
width: 698px;
background-color: #FFC;
}
如果这些规则真的被覆盖，你可能有另一个具有更高特异性的规则。在这种情况下，您必须向我们展示更多您的 HTML。
不应有多个具有相同 id 的元素。这是无效的，将给出未定义的结果。
如果将div id 更改为类，则需要相应地更改 CSS 以定位类而不是 id。CSS 类的目的正是这样 - 针对多个相关的元素并应用相同的样式。
只要您正确定位元素，结果就不会有区别。
你应该知道每个id都应该是唯一的。在您的示例中，输出似乎是一个小错误。尝试将类属性设置为div 而不是图像。如果你没有充分的理由，你应该最好每次都使用类属性。
现在是图像子级的文本对齐集，例如，如果无法加载图像，这将是 alt 值。