Question

我一直试图将联系表格和反馈表格集中在一起，为了让它们水平对齐，我使用了float：left;对于他们两个但是我也想让两个表格水平显示中心，

每当我让它们一起水平显示时，它们就会被卡住左边，当我让他们居中时，他们会一个在另一个之上，

我正在尝试上述两个

我尝试过使用

    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 500px;

我也用过浮动：左;使它们彼此水平放置但是我也不能把它们放在那个选项的中心。

text-align: center;

似乎只是将我的文字放在中心而不是我的完整div标签

请帮忙，谢谢

Answer 1

将它们全部包裹在单个父DIV中。

<div id="wrap"><!--content here --></div>

为父级提供固定宽度margin: 0 auto;：

#wrap{
margin: 0 auto;
width:500px;
}

Answer 2

只需将flex *代替block放入主容器display和justify-content: center *

* http://learnlayout.com/flexbox.html

请注意，维护元素水平排列的最简单方法是确保它们为display: inline或display: inline-block†。如果您的元素堆叠在一起，则很可能它们具有display: block;大多数表单元素默认为内联以及锚点和跨度。

我使用输入标签而不是div，因为它们是内联的，但是如果你想使用div仍然是这样，那么每个都是这样：

div { display: inline-block; }

选择器＆＃34; div＆＃34;当然可以根据你的代码（奇怪的是没有）-_-

†http://learnlayout.com/inline-block.html

使用2个字段集#contact和#feedback进行了额外的演示。

http://plnkr.co/edit/pET6ZsG3IKQITXqnXBZY?p=preview

＆＃13;

body {
  width: 100vw;
}
#bar {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  border: 2px solid black;
}
input {
  width: 40px;
  text-align: center;
}

＆＃13;

<section id="bar">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
</section>

＆＃13;

Answer 3

我很确定这是你正在寻找的，也是相当敏感的。

两个div在包装div中居中。

https://jsfiddle.net/jp1p1dq4/2/

这是标记;

<div id="divWrap">
<div class="halfDiv left"></div>
<div class="halfDiv right"></div>
</div>

#divWrap{
  width:auto; 
  margin:none;
  height:200px;
  background-color:#3f3f3f;
  align-content:center;
  padding:1em 0;
}
.left{
  background-color:#696969;
}
.right{
  background-color:#939393;
}
.halfDiv{
  display:inline-block;
  height:100px;
  margin: 0 2%;
  width:46%;
  float:left;
}

Answer 4

使用display：table而不是display：block

display: table;
    margin: 0 auto;
    width: 500px;

尝试将多个div标签居中并将它们保持在同一条线上

4 个答案: