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

Question

我有一个主容器，左边是搜索表单，右边是另一个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()但这不实际

Answer 1

我不是100％确定这是否有效，因为我没有工作的JSfiddle或其他东西来测试它，但尝试将text-align: center;添加到.results-container css块。

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

让我知道这是否有效。

Answer 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