如何在主 div 容器中居中表单请求 div答案

【问题标题】：How to center form request divs inside a main div container如何在主 div 容器中居中表单请求 div
【发布时间】：2016-12-21 17:01:52
【问题描述】：

我有一个主容器，左侧是搜索表单，右侧是另一个 div 容器。在右边的容器中，我们发现表单提交找到的值在另一个 div 上（我们称之为结果 div）。

这是 CSS：

.main-container{
    margin: 0 auto;
    overflow: auto;    
    width: 90vw;
    height: 85vh;
    background-color: #ff9933;
}


/*form inside main-container on the left*/

.form{ 
  float: left;
  width: 15vw;
  margin-top: 2vh;
  margin-left: 2vh;
  position: absolute;
}


/* results-container inside main-container on the right*/ 

.results-container{
    display: inline-block;      
    width: 70vw;
    float: right;
}

/* found results div inside it's container */

.result{
    display: inline-block;  
    width: 284px;
    height: 315px;
    position: relative;
    margin: 0 auto;
}

这里有一些图片让你理解，谢谢你的帮助

我无法将结果集中在结果容器中。如果我删除 display: inline-block; 一切都居中但未对齐（每行一个结果）。如果我这样处理，所有结果都会向左移动，这不是我们想要的行为。

我对 PHP jQuery 之类的东西持开放态度。我想计算 $sql 结果并根据结果更改定位 count() 但这不切实际

【问题讨论】：

标签： jquery html css centering

【解决方案1】：

我不能 100% 确定这是否可行，因为我没有可用的 JSfiddle 或其他东西来测试它，但请尝试将以下 text-align: center; 添加到您的 .results-container css 块中。

.results-container{
    display: inline-block;      
    width: 70vw;
    float: right;
    text-align: center;
}

让我知道这是否有效。

【讨论】：

我正要回答同样的问题。我有一个小提琴：jsfiddle.net/65a08ofk
是的！ text-align: center 几乎一直为我工作
我发誓我也试过了，但没有成功，它只是使文本居中而不是相关的东西（图像、样式等）但是现在神奇地它就像一个魅力！很Ty^^

【解决方案2】：

为了获得更灵活的方法，我建议使用 flexbox：

一般方法（高度/宽度等仅用于示例）：

.container {
    background: lightblue;
    height: 600px;
    width: 500px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
}

.result {
  margin: 10px;
   height: 100px;
   width: 100px;
   background: red;
}

弄乱结果宽度，看看它在保持居中的同时如何相应地变化。

Fiddle

【讨论】：

【解决方案3】：

从浮动移动到flexing。

使用

display:flex;
flex-wrap: wrap;
justify-content: center;

在结果容器上启动。

【讨论】：