css horizontal Mitte wählen Sie das Menü und Label

Question

Ich habe einen jsfiddle hier https://jsfiddle.net/z0yjvksg/38/

Super einfach, aber seine mich verrückt fahren.

Ich muss nur das Auswahlmenü zentrieren und (rotes Kästchen) im Container markieren (grünes Feld).

Ich habe alles versucht, was ich denken kann, ohne tatsächlich Polsterung oder Ränder hinzuzufügen, um die Box über zu schieben.

.form{ 
     border: 1px solid green; 
     padding: 10px 0; 
    } 

    .search-form__by{ 
     border: 1px solid red; 
     display: inline-block; 
     margin: 0 auto; 
     //text-align: center: 

     label{ 
      float: left; 
      margin: 7px 10px 0 0; 
     } 

     select{ 
      width: 200px; 
     } 
    } 

Answer 1

hinzufügen text-align auf Formularklasse.

.form{ 
    border: 1px solid green; 
    padding: 10px 0; 
    text-align:center; 
} 

Voll Lösung: https://jsfiddle.net/hs0bxyny/

Answer 2

Anzahl:

.row { 
    text-align:center; 
} 

jsFiddle example

Oder wenn Sie Bootstrap verwenden, fügen Sie die Klasse text-center zur Reihe div: <div class="row text-center">