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

回答

相關問題