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

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：

一般方法（heights/widths 等只是为了举例）：

.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

Answer 3

从浮动移动到 flexing。

使用

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

在结果容器上开始。

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

How to center form request divs inside a main div container

html

css

jquery

centering