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成员打开一个新问题，以帮助您按照您想要的方式获取它。但是，从描述和发布的代码来看，它似乎是一个渲染问题。

进一步阅读：

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

我希望这有帮助！：）

CSS中心问题

2 个答案: