CSS居中问题

Question

我正在创建一个响应式布局，但我注意到一个居中问题。我有三个 div（三个框，每个框都相邻），我将它们放入父 div 中以进行对齐。奇怪的是，在 Dreamweaver 上一切正常，但是当我打开 HTML 文件以在本地测试页面时，居中不正确。这是图片，以便您更好地理解。

在 Dreamweaver 上 click

当我在本地打开 HTML 页面时 click

如您所见，在第一个屏幕中，左右空间完全相等，在第二个屏幕中，左侧空间更窄。我很想知道为什么在dreamweaver 上可以。这是我使用的代码。

    #infoInner {
    margin-left: 0.5%;
    margin-right: -0.5%;
  }

  .boxInfo {
    padding: 2% 2%;
    margin: 0 1.5%;
    width: 26%;
    border: 1px dashed white;
    float: left;
  }

Answer 1

默认情况下，浏览器倾向于向文档添加样式。这就是为什么存在诸如normalize.css 之类的项目来删除它们的原因，但是，这不是您问题的解决方案。

当网络浏览器显示代码时，rendering engine 会解释代码，然后将其显示在屏幕上。 Chrome 使用 Blink，Safari 使用 Webkit，Internet Explorer 使用 Trident，等等。经过一番研究，我看到 Dreamweaver 使用 Presto 渲染引擎直到版本 3，然后在版本 4 / 5 上转移到 Webkit。我不确定 DW6 版本，我也假设它是 Webkit （欢迎编辑）。如果您在 Safari 中打开代码，您应该会收到类似的结果。

我建议您使用 jsfiddle 中表示的代码打开一个新问题，以便 SO 成员帮助您并以您想要的方式获得它。但是，从描述和发布的代码来看，这似乎是一个渲染问题。

进一步阅读：

• http://en.wikipedia.org/wiki/Web_browser_engine
• http://mashable.com/2014/02/26/browser-testing-tools/
• https://www.youtube.com/watch?v=7bs9RGolIyI（喜剧更多）

Answer 2

你可以这样做吗：

<div class="wrapper">
    <div class="item"></div>
    <div class="item center"></div>
    <div class="item"></div>
</div>

.wrapper {
    text-align: center;
    width: 100%;
}

.wrapper .item {
    float: none;
    display: inline;
    width: 32%;
    margin: 0px;
}

.wrapper .item.center{
    margin-left: 1%;
    margin-right: 1%;
}

希望对您有所帮助！ :)