如何将两个表单居中放置在一张图片旁边

Question

我正在为正确的使用HTML和CSS定位两个表单而苦恼。我已经尝试了float和display:inline-block两种方法，但只有用其中一种方法才能使一半的内容正常工作。

我的目标是将两个表单显示在一起，居中在一个DIV中，该DIV仅占页面的70％，每个表单占用可用空间的50％。两个表单都需要具有最小宽度，并且如果没有足够的空间同时显示两个表单（例如在手机纵向模式下显示页面时），它们应被推入单独的行中。

如果我浮动包含表单的两个DIV，则它们会并排显示，但未正确居中（因为它们浮动到左侧或右侧，我需要将每个DIV的大小设置为40％，否则它们无法并排）。 如果我使用display:inline-block，则DIV的大小和居中位置都正确，但它们在两个单独的行中而不是相邻的。这是使用display:inline-block的当前代码。

#background {
  background-image: url(pic.jpg);
  height: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: center;
}
#form-wrapper {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
#form1 {
  width: 50%;
  display: inline-block;
}
#form2 {
  width: 50%;
  display: inline-block;
}

<div id="background">
  <div id="form-wrapper">
    <div id="form1">
      <form>some form code here</form>
    </div>
    <div id="form2">
      <form>some form code here</form>
    </div>
  </div>
</div>

当使用display:inline-block时，为什么表单会显示在不同的行上？

- chipotle

---

FYI：你还没有转义你的 "form-wrapper" ID：<div id="form-wrapper> - Ben Philipp

关闭id :-)，<div id="form-wrapper> ==> <div id="form-wrapper"> - Arunabh Trivedi

没有关闭ID是我在尝试简化stackoverflow代码时犯的一个笔误，它已经在网站上被关闭了，不会导致问题。 - chipotle

Answer 1

你可能无法将两个inline-block元素放在一起，因为两个元素的宽度加上它们之间的空白符大于容器的 100%。因此，第二个元素没有足够的空间而换行。 inline-block 元素会考虑 HTML 代码中的空白符。下面展示了两个元素之间的空白符：

#background {
  background-image: url(pic.jpg);
  height: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: center;
}
#form-wrapper {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
#form1 {
  width: 40%;
  display: inline-block;
  background-color: #CCC;
}
#form2 {
  width: 40%;
  display: inline-block;
  background-color: #CCC;
}

<div id="background">
  <div id="form-wrapper">
    <div id="form1">
      <form>some form code here</form>
    </div>
    <div id="form2">
      <form>some form code here</form>
    </div>
  </div>
</div>

因此，解决您的问题的一种方法是删除空格，如下所示。

我还为每个元素设置了最小宽度，以便在窗口宽度低于指定宽度时它们会换行到不同的行。要查看此操作，请单击右上角的“全屏”按钮并调整浏览器窗口大小。

#background {
  background-image: url(pic.jpg);
  height: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: center;
}
#form-wrapper {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
#form1 {
  width: 50%;
  display: inline-block;
  min-width:200px;
}
#form2 {
  width: 50%;
  display: inline-block;
  min-width:200px;
}

<div id="background">
  <div id="form-wrapper">
    <div id="form1">
      <form>some form code here</form>
    </div><div id="form2">
      <form>some form code here</form>
    </div>
  </div>
</div>

- showdev

---

去除所有空格和/或将表单宽度设置为小于50%也没有影响，表单仍然保持在单独的行中。 - chipotle

你所考虑的解决方案在窗口宽度较小时无法正常工作，即两个表单不会填充两行。请查看此演示。 - SaidbakR

@chipotle 我的演示在同一行显示了两个元素。也许你实际的上下文与你发布的代码不同。如果是这样，请编辑你的问题，包括相关的代码并说明你遇到的问题。 - showdev

在我看来，它似乎完全正常，而且正是我想提出的建议。http://jsfiddle.net/tsv9as02/ - Pevara

是的，最后的更新很好。min-width已经解决了。 - SaidbakR

Answer 2

非常感谢您的输入！在研究了这个问题两天后，我开始怀疑一切，但是您的示例表明，我最初使用display: inline-block的css想法很好。 http://jsbin.com/qiraxo/2/上的示例正是我要找的。

在进一步挖掘后，我意识到我的某个表单不起作用，即使将工作表单复制第二次也没有改变行为。所以我继续挖掘，发现问题所在：DIV声明中有一个拼写错误...

再次感谢您，祝您晚上愉快。

- chipotle

Answer 3

在你的包装器中使用display:flex：

#form-wrapper {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  display:flex;
}

JS BIN

{{链接1：JS BIN}}

- Gary Hayes