Question

我想在页面中居中放置两张图片。我的身体宽度是800px。

在Firefox 31.0，Firefox 20和IE 11中，图像以这种方式显示，但在IE 8中，图像垂直堆叠，它们水平居中，每边约有190px的垂直空白带。

我认为这可能是由于并排接近800px时的组合宽度，IE 9可能会将它们包裹起来以垂直堆叠它们。我尝试了更窄的300px图像，它们仍然在IE中垂直堆叠。

很高兴收到所有建议

<div class="gearSection" style="text-align:center;display: block;">
  <div style="border:1px solid blue; display:inline-block; margin-left:auto; margin-right:auto;margin-top:2px;margin-bottom:2px;">
    <img src="images/Hoodie_02.jpg" border="0" width="380px" height="633px" alt="Hoodie"><br><b>Hoodies</b>
  </div>

  <div style="border:1px solid blue; display:inline-block; margin-left:auto; margin-right:auto;margin-top:2px;margin-bottom:2px;">
    <img src="images/Hat_02.jpg" border="0" width="380px" height="633px" alt="Hat"><br><b>Beanie Hat</b>
  </div>
</div>

Answer 1

You just only need to add <!DOCTYPE html> because of html5 support. Try to read this http://msdn.microsoft.com/en-us/library/ie/ms535242(v=vs.85).aspx

<!DOCTYPE html>
<html>
<head>
<body>
<div class="gearSection" style="text-align:center;display: block;">
  <div style="border:1px solid blue; display:inline-block; margin-left:auto; margin-   right:auto;margin-top:2px;margin-bottom:2px;">
    <img src="images/Hoodie_02.jpg" border="0" width="380px" height="633px" alt="Hoodie"><br><b>Hoodies</b>
  </div>

  <div style="border:1px solid blue; display:inline-block; margin-left:auto; margin-right:auto;margin-top:2px;margin-bottom:2px;">
    <img src="images/Hat_02.jpg" border="0" width="380px" height="633px" alt="Hat"><br><b>Beanie Hat</b>
  </div>
</div>
</body>
</html>

Answer 2

正如我在上述评论中所述，我认为这与此question重复。您可以通过在文档中添加DOCTYPE来尝试遵循此问题中的建议。如果没有看到完整的HTML，我就无法看到你是否已经拥有它。如果没有，请添加

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

图像不是在IE 8中并排显示的，但在IE 11和Firefox中没问题

2 个答案: