2016-08-09 4 views
0

Ich habe einen jsfiddle hier https://jsfiddle.net/z0yjvksg/38/css horizontal Mitte wählen Sie das Menü und Label

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

Antwort

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/

+0

bereits versucht, dass https://jsfiddle.net/z0yjvksg/51/ – ttmt

+0

Lösung: https://jsfiddle.net/hs0bxnyy/ –

+0

Dank kcp, ich bin mir sicher, dass ich das versucht hatte – ttmt

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">

+0

Ich habe andere Dinge in der Reihe in den eigentlichen Code, der auch – ttmt

+0

zentriert werden Sie sagen, dass dies nicht für Sie arbeiten? Es funktioniert basierend auf dem von Ihnen bereitgestellten Beispielcode. Wenn Sie andere Elemente haben, die das Ergebnis beeinflussen könnten, sollten Sie Ihre Frage überarbeiten und ein [mcve] bereitstellen. – j08691

+0

Es funktioniert, aber es zentriert alles in der Zeile, ich will nicht alles zentriert – ttmt

Verwandte Themen