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

我有一个主容器，左侧有一个搜索表单，右侧有另一个div容器。在正确的容器中，我们发现表单提交发现的值在另一个div上（我们称之为结果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()但是这不实际

来源

2016-08-15 Rotsyx

我不是100％肯定这是否会工作或没有，因为我没有做工作的jsfiddle或东西来测试，但尝试添加跟随text-align: center;到您的.results-container css区块。

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

让我知道这是否有效。

来源

2016-08-15 13:28:52

我正要回答相同的问题。我在这里有一个小提琴：https：//jsfiddle.net/65a08ofk –

是的！ 'text-align：center'对我来说几乎一直工作 –

我发誓上帝我也试过了，它没有工作，它只是居中文本和不相关的东西（图像，样式等）但现在神奇地它像一个工程魅力！非常感谢^^ – Rotsyx

为了更好地灵活的方法，我建议你使用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; 
}

惹结果宽度并看看它如何相应改变，同时保持中心。从浮动flexing

Fiddle

来源

2016-08-15 13:32:49

移动。

成果容器使用

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

启动。

来源

2016-08-15 13:33:20

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

回答

相关问题