jquery - 如何在主 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 block 。

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

让我知道这是否有效。