So zentrieren Sie Formularanforderungsdivs in einem Hauptdivcontainer

Question

Ich habe einen Hauptcontainer mit einem Suchformular auf der linken Seite und einem weiteren div-Container auf der rechten Seite. Auf dem rechten Container finden wir die Form submit found values, die sich auf einem anderen div befinden (nennen wir es result div).

Dies ist die 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; 
} 

Hier sind einige Bilder, die Sie machen verstehen, vielen Dank für Ihre Hilfe

Ich bin nicht in der Lage Ergebnisse innerhalb Ergebnisse Container zu zentrieren. Wenn ich display: inline-block; entferne, ist alles zentriert, aber nicht ausgerichtet (ein Ergebnis pro Zeile). Wenn ich es so lasse, bleiben alle Ergebnisse links, was nicht das gewünschte Verhalten ist.

Ich bin offen für alles wie PHP jQuery oder so. Ich über Zählungen $sql Ergebnisse und Änderung der Positionierung in Abhängigkeit von den Ergebnissen count()

Answer 1

Ich bin nicht 100% sicher, ob dies funktioniert oder nicht, wie ich habe keine funktionierende JSfiddle oder etwas zu testen, aber versuchen Sie, hinzuzufügen folgende text-align: center; zu Ihrem .results-container CSS-Block.

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

Lassen Sie mich wissen, ob das funktioniert oder nicht.

Answer 2

Zum besseren flexiblen Ansatz, würde ich mit Flexbox empfehlen:

Ansatz im Allgemeinen (Höhen/Breite usw. ist nur aus Gründen des Beispiels):

.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; 
} 

Mess um mit den Ergebnisbreiten und sehen, wie es sich dementsprechend ändert, während es zentriert bleibt.

Fiddle

Answer 3

Verschieben von zu flexing schweben.

Verwenden

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

auf ergebnis Container zu starten.