web-dev-qa-db-de.com

Ich möchte den Text im Auswahlfeld vertikal ausrichten

Ich möchte den Text im Auswahlfeld vertikal ausrichten. Ich habe es versucht 

select{
   verticle-align:middle;
}

es funktioniert jedoch in keinem Browser. Chrome scheint den Text im Auswahlfeld standardmäßig an der Mitte auszurichten. FF richtet sie nach oben aus und IE richtet sie nach unten aus. Gibt es eine Möglichkeit, dies zu erreichen? Ich verwende das GWT-Widget "Select" in UIBinder.

Das ist momentan was ich habe:

select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

Vielen Dank!

63
datauser

Die beste Option wird wahrscheinlich darin bestehen, die obere Füllung und den Vergleich zwischen Browsern anzupassen. Es ist nicht perfekt, aber ich denke, es ist so nah wie möglich.

padding-top:4px;

Wie viel Abstand Sie benötigen, hängt von der Schriftgröße ab.

Tipp: Wenn Ihre Schriftart in px eingestellt ist, setzen Sie die Auffüllung ebenfalls in px. Wenn Ihre Schriftart in em eingestellt ist, legen Sie auch die Auffüllung in em fest.

EDIT

Dies sind die Optionen, von denen ich glaube, dass sie vertikal sind, da die vertikale Ausrichtung in den Browsern nicht konsistent ist.

A. Entfernen Sie das height-Attribut und lassen Sie den Browser damit umgehen. Dies funktioniert normalerweise für mich am besten.

 <style>
    select{
        border: 1px solid #ABADB3;
        margin: 0;
        padding: auto 0;
        font-size:14px;
    }
    </style>
    <select>
        <option>option 1</option>
        <option>number 2</option>
    </select>

B. Top-Padding hinzufügen zu Text nach unten drücken. (In einigen Browsern den Pfeil nach unten gedrückt.)

<style>
select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 4px 0 0 0;
    font-size:14px;
}
</style>
<select>
    <option>option 1</option>
    <option>number 2</option>
</select>

C. Sie können die Schrift vergrößern, um zu versuchen, die ausgewählte Höhe ein wenig besser anzupassen.

<style>
select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 0 0 0 0;
    font-size:17px;
}
</style>
<select>
    <option>option 1</option>
    <option>number 2</option>
</select>
45
user401183

Ich bin über diesen Satz von CSS-Eigenschaften gestolpert, die den Text in den select-Elementen in Firefox vertikal auszurichten scheinen:

select
{
    box-sizing: content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
}

Wenn überhaupt, drückt es den Text in IE8 sogar noch weiter nach unten. Wenn ich die Box-Sizing-Eigenschaft auf border-box zurücksetze, wird IE8 zumindest nicht schlechter (und FF wendet immer noch die -moz-box-Sizing-Eigenschaft an). Es wäre schön, eine Lösung für IE zu finden, aber ich halte nicht den Atem an.

Editieren: Nix this. Es funktioniert nicht nach dem Testen. Für alle, die daran interessiert sind, scheint das Problem auf eingebaute Stile in der Datei forms.css von FF zurückzuführen zu sein, die sich auf Eingabe- und Auswahlelemente auswirken. Die fragliche Eigenschaft ist Zeilenhöhe: normal! Wichtig . Es kann nicht überschrieben werden. Ich habe es versucht. Ich entdeckte, dass ich, wenn ich die eingebaute Eigenschaft in Firebug lösche, ein select-Element mit einigermaßen vertikal zentriertem Text erhält. 

18
Shelly Skeens

Meine Lösung besteht darin, nur so einen Aufsatz für ausgewählte Feuerlöschpistolen hinzuzufügen

// firefox vertical aligment of text
@-moz-document url-prefix() {
    select {
        padding-top: 13px;
   }
}
10
adam187

Ich bin genau auf dieses Problem gestoßen. Meine Auswahloptionen waren im Webkit vertikal zentriert, jedoch wurden sie oben angezeigt. Nachdem ich mich umgesehen hatte, wollte ich nicht wirklich eine Arbeit schaffen, die unordentlich war und letztendlich mein Problem nicht löste. 

Lösung: Javascript.

if ($.browser.mozilla) {
            $('.styledSelect select').css( "padding-top","8px" );
        }

Dies löst Ihr Problem sehr genau. Der einzige Nachteil hier ist, dass ich jQuery verwende, und wenn Sie jQuery nicht bereits in Ihrem Projekt verwenden, möchten Sie möglicherweise keine js-Bibliothek für eine einmalige Verwendung hinzufügen.

Hinweis: Ich empfehle, nichts mit js zu stylen, es sei denn, es ist absolut notwendig. CSS sollte immer die Hauptlösung für das Styling sein - denken Sie an jQuery (in diesem Beispiel) als Axt mit der Aufschrift "Break in Notfall".

* UPDATE * Dies ist ein alter Beitrag, und da es scheint, als würden die Leute immer noch auf diese Lösung verweisen, sollte ich (wie in den Kommentaren erwähnt) angeben, dass dieses Feature seit 1.9 aus jQuery entfernt wurde . Sehen Sie sich das Modernizr -Projekt an, um Feature-Erkennung anstelle von Browser-Sniffing durchzuführen.

4
Scott Sword

Bisher funktioniert das gut für mich:

line-height: 100%;
2
user3403273

hatte gerade dieses Problem, aber für mobile Geräte hauptsächlich mobile firefox . Der Trick für mich bestand darin, eine height , padding , line height und schließlich box size zu definieren, alles auf dem select Element. Verwenden Sie hier nicht Ihre Beispielnummern, sondern nur ein Beispiel: 

padding: 20px;
height: 60px;
line-height: 1;
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;
2
asherrard

Ich stellte fest, dass das Einstellen der Zeilenhöhe und -höhe auf dieselbe Pixelmenge das konsistenteste Ergebnis ergab. Mit "beständig" meine ich optimal konsistent, aber natürlich ist es bei Browsern nicht 100% "pixelgenau". Außerdem habe ich festgestellt, dass Firefox (V. 17.x) den Optionstext nach rechts gegen den Dropdownpfeil drückt. Ich habe dies mit einer kleinen Menge Padding-Right, die nur für das Element OPTION festgelegt wurde, gemindert. Diese Einstellung wirkt sich nicht auf das Erscheinungsbild in IE 7-9 aus.

Mein ergebnis:

select, option {
    font-size:10px;
    height:19px;
    line-height: 19px;
    padding:0;
    margin:0;
}

option {
    padding-right:6px; /* Firefox */
}

HINWEIS - Mein SELECT-Element verwendet eine kleinere Schrift (10px). Offensichtlich müssen Sie die Proportionen entsprechend Ihrem spezifischen UI-Kontext anpassen.

1
code-sushi

Ich habe folgendes versucht und es hat für mich funktioniert: 

select {
     line-height:normal;
     padding:3px;
} 
1
Ted

Versuchen Sie, das Attribut "Zeilenhöhe" festzulegen

So was:

select{
    height: 28px !important;
    line-height: 28px;
}

Hier sind einige Dokumentationen zu diesem Attribut:

http://www.w3.org/wiki/CSS/Properties/line-height

http://www.w3schools.com/cssref/pr_dim_line-height.asp

0
AndreaRivadossi

Ich hatte das gleiche Problem und habe stundenlang daran gearbeitet. Ich habe endlich etwas gefunden, was funktioniert. 

Grundsätzlich habe ich nichts in jeder Situation versucht, bis ich ein div gesetzt habe, um den Text der ersten Option über dem Auswahlfeld zu replizieren und die erste Option leer zu lassen. Ich habe {pointer-events: none;} verwendet, damit Benutzer durch das Div klicken können. 

HTML

    <div class='custom-select-container'>
      <select>
        <option></option>
        <option>option 1</option>
        <option>option 2</option>
      </select>
      <div class='custom-select'>
        Select an option
      </div>
    <div>

CSS

.custom-select{position:absolute; left:28px; top:10px; z-index:1; display:block; pointer-events:none;}
0
Adam Ulivi
display: flex;
align-items: center;
0
Victor Bredihin

du kannst Geben : 

select{
   position:absolute;
   top:50%;
   transform: translateY(-50%);
}

und zum Elternteil müssen Sie Position geben: relativ . es wird funktionieren.

0
puja

Dies wurde nun in Firefox Nightly behoben und wird im nächsten Firefox-Build erscheinen.

Weitere Informationen finden Sie in diesem Bug https://bugzilla.mozilla.org/show_bug.cgi?id=610733

0
lukefrake

Ich habe height und line-height mit den gleichen Werten verwendet, die sich jedoch in den Interwebs als inkonsistent erwiesen haben. Mein derzeitiger Ansatz ist es, das mit Polsterung so zu mischen.

select {
  font-size:14px;
  height:18px;
  line-height:18px;
  padding:5px 0;
  width:200px;
  text-align:center;
}

Sie können auch padding für den horizontalen Wert anstelle von width + text-align verwenden.

0
Jason Lydon

Ich fand, dass nur das Hinzufügen von padding-top das graue Dropdown-Pfeilfeld auf der rechten Seite nach unten gedrückt hat, was unerwünscht war. 

Die Methode, die sich für mich bewährt hat, war, in den Inspektor zu gehen und padding schrittweise hinzuzufügen, bis der Text zentriert wurde. Dadurch wird auch das Dropdown-Symbol verkleinert, es wird jedoch auch zentriert, sodass es nicht so störend wirkt.

0
laurencedorman