居中内联块

Question

我一直在整夜工作以使两个内联块居中，但我似乎无法做到这一点。框架要么难以置信地偏移页面，要么只是停留在左侧。我试过将文本居中（这将使其他所有内容都居中）并设置左侧和右侧。 margin-left通过CSS。无法找到一个好的解决方案。具有“盒子”类的div需要居中，其中有两个。

我的代码在此JSFiddle上，感谢任何帮助。

div#signin-reg {
    margin-left: auto;
    margin-right: auto;
   position: absolute;
}
div.box {
    padding: 2.5px;
    float: middle;
    vertical-align: top;
    display: inline-block;
    margin-top: 5px;
    background-color: #ffffff;
    font-size: 10px;
    width: 230px;
    box-shadow: 0px 0px 5px #dfdfdf;
    -webkit-box-shadow: 0px 0px 5px #dfdfdf;
    border-radius: 5px;
}

这就是现在的样子 我希望它看起来像（粗略，只是在预览中编辑）

Answer 1

http://jsfiddle.net/x872fb38/6/

div#signin-reg {
   margin-left: auto;
    margin-right: auto;
    position: absolute;
    text-align: center;
}

  div.box {
      padding: 2.5px;
      float: middle;
      vertical-align: top;
      display: inline-block;
      margin-top: 5px;
      background-color: #ffffff;
      font-size: 10px;
      width: 230px;
      box-shadow: 0px 0px 5px #dfdfdf;
      -webkit-box-shadow: 0px 0px 5px #dfdfdf;
      border-radius: 5px;
      text-align: left;
  }

Answer 2

从#signin-reg position:absolute移除。设置宽度.box + .box并添加margin: 0 auto。

width: 475px; margin: 0 auto;

http://jsfiddle.net/x872fb38/3/

我玩了一下，并设法像截图一样编码。 这是演示。

http://jsfiddle.net/x872fb38/5/

虽然我有一些我想说的话。如果我是你，我会使用twitter bootstrap。 使用这个框架你想要实现的是非常简单和互联网上有很多例子。

但是，如果你想自己编写代码或使用框架会有点矫枉过正，这是我的方法：

我将设置为.box - float: left并删除display: inline-block;只要有空格，这将使它们彼此相邻。在这里，我们用较低的分辨率（“响应性”）来解决问题。如果文档的宽度小于两个.box水平对齐所需的宽度，则其中一个将在下面。这要求父元素的百分比设置为width。

无论如何，如果你不是那么自命不凡，上面的演示就可以了。 ：）

Answer 3

只需从positon:absolute

中删除div#signin-reg即可

 div#signin-reg {
  margin-left: auto;
  margin-right: auto;
 }

DEMO

Answer 4

其他答案还可以，

但是，如果由于某些特定原因，您需要绝对定位，
你可以这样做：

div#signin-reg {
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}