선택 상자에서 텍스트를 세로로 정렬하고 싶습니다.

선택 상자에서 텍스트를 세로로 정렬하고 싶습니다.

---

선택 상자의 텍스트를 세로로 정렬하고 싶습니다. 나는 사용해 보았다

select{
   verticle-align:middle;
}

그러나 어떤 브라우저에서도 작동하지 않습니다. Chrome은 기본적으로 선택 상자의 텍스트를 중앙에 정렬하는 것 같습니다. FF는 상단에 정렬하고 IE는 하단에 정렬합니다. 이것을 달성하는 방법이 있습니까? UIBinder에서 GWT의 선택 위젯을 사용하고 있습니다.

이것은 현재 내가 가지고있는 것입니다.

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

감사!

---

가장 좋은 방법은 상단 패딩을 조정하고 브라우저간에 비교하는 것입니다. 완벽하지는 않지만 최대한 가깝다고 생각합니다.

padding-top:4px;

필요한 패딩의 양은 글꼴 크기에 따라 다릅니다.

팁 : 글꼴이로 설정된 경우 px패딩도 설정하십시오 px. 글꼴이로 em설정된 경우 패딩 em도 설정하십시오 .

편집하다

수직 정렬이 브라우저에서 일관되지 않기 때문에 이것이 내가 생각하는 옵션입니다.

A. height 속성을 제거하고 브라우저가 처리하도록합니다. 이것은 일반적으로 가장 잘 작동합니다.

 <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. 상단 패딩을 추가하여 텍스트를 아래로 누릅니다. (일부 브라우저에서는 화살표를 아래로 눌렀습니다)

<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. 글꼴을 더 크게 만들어 선택 높이를 조금 더 멋지게 맞출 수 있습니다.

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

---

Firefox에서 크기가 지정된 선택 요소에서 텍스트를 세로로 정렬하는 것처럼 보이는 CSS 속성 집합을 우연히 발견했습니다.

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

그래도 IE8에서는 텍스트를 더 아래로 밀어냅니다. box-sizing 속성을 border-box로 다시 설정하면 적어도 IE8이 더 나빠지지는 않습니다 (그리고 FF는 여전히 -moz-box-sizing 속성을 적용합니다). IE에 대한 해결책을 찾는 것이 좋겠지 만 숨을 참지 않고 있습니다.

편집 : Nix이. 테스트 후 작동하지 않습니다. 그러나 관심있는 사람에게는 문제가 입력 및 선택 요소에 영향을 미치는 FF의 forms.css 파일에 내장 된 스타일에서 비롯된 것 같습니다. 문제의 속성은 line-height : normal! important 입니다. 재정의 할 수 없습니다. 난 노력 했어. Firebug에서 기본 제공 속성을 삭제하면 텍스트가 세로로 중앙에 배치 된 선택 요소가 표시된다는 것을 발견했습니다.

---

내 해결책은 이처럼 파이어 폭스를 대상으로 선택한 패딩 상단을 추가하는 것입니다.

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

---

나는이 문제에 정확히 부딪쳤다. 내 선택 옵션은 웹킷에서 수직으로 중앙에 배치되었지만 기본값은 맨 위에 있습니다. 주변을 둘러 본 후에는 지저분하고 궁극적으로 내 문제를 해결하지 못하는 해결 방법을 만들고 싶지 않았습니다.

솔루션 : 자바 스크립트.

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

이것은 당신의 문제를 매우 정확하게 해결합니다. 유일한 단점은 내가 jQuery를 사용하고 있다는 것입니다. 프로젝트에서 이미 jQuery를 사용하고 있지 않다면 일회성으로 js 라이브러리를 포함하고 싶지 않을 수도 있습니다.

참고 : 꼭 필요한 경우가 아니면 js로 스타일을 지정하지 않는 것이 좋습니다. CSS는 항상 스타일링을위한 기본 솔루션이어야합니다. jQuery (이 특정 예에서는)를 "긴급 상황에서 중단"이라고 표시된 도끼로 생각하십시오.

* 업데이트 * 이것은 오래된 게시물이며 사람들이 여전히이 솔루션을 참조하고있는 것처럼 보이기 때문에 1.9 이후로이 기능이 jQuery에서 제거되었다고 (주석에서 언급했듯이) 언급해야합니다. 브라우저 스니핑 대신 기능 감지 를 수행 하려면 Modernizr 프로젝트를 참조하십시오 .

---

이 문제가 있었지만 모바일 장치의 경우 주로 모바일 파이어 폭스 . 나를위한 트릭 은 select 요소 에서 height , padding , line height , 마지막으로 box sizing 을 정의하는 것이 었습니다 . 여기에 예제 번호를 사용하지 않고 예제를 위해 :

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

---

지금까지 이것은 나를 위해 잘 작동합니다.

line-height: 100%;

---

나는 다음과 같이 시도했고 그것은 나를 위해 일했습니다.

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

---

I found that simply setting the line-height and height to the same pixel quantity produced the most consistent result. By "most consistent" I mean optimally consistent but of course it is not 100% "pixel-perfect" across browsers. Additionally I found that Firefox (v. 17.x) tends to crowd the option text to the right against the drop-down arrow; I alleviated this with a small amount of padding-right set on the OPTION element only. This setting does not affect appearance in IE 7-9.

My result:

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

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

NOTE -- my SELECT element uses a smaller font, 10px. Obviously you will need to adjust proportions accordingly for your specific UI context.

---

Try to set the "line-height" attribute

Like this:

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

Here you are some documentation about this attribute:

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

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

---

I used to use height and line-height with the same values, but the proved to be inconsistent across the interwebs. My current approach is to mix that with padding like so.

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

You could also use padding for the horizontal value instead of the width + text-align

---

I've had the same problem and been working on it for hours. I've finally come up something that works.

Basically nothing I tried worked in every situation until I positioned a div to replicate the text of the first option over the select box and left the actual first option blank. I used {pointer-events:none;} to let users click through the div.

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

---

I found that only adding padding-top pushed down the grey dropdown arrow box on the right, which was undesirable.

The method that worked for me was to go into the inspector and incrementally add padding until the text was centered. This will also reduce the size of the dropdown icon, but it will be centered as well so it isn't as visually disturbing.

---

This has now been fixed in Firefox Nightly and will be in the next firefox build.

Please see this bug for more information https://bugzilla.mozilla.org/show_bug.cgi?id=610733

---

you can give :

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

and to parent you have to give position:relative. it will work.

---

display: flex;
align-items: center;

---

The nearest general solution i know uses box-align property, as described here. Working example is here (i can test it only on Chrome, believe that has equivalent for other browsers too).

CSS:

select{
  display:-webkit-box;
  display:-moz-box;
  display:box;
  height: 30px;;
}
select:nth-child(1){
  -webkit-box-align:start;
  -moz-box-align:start;
  box-align:start;
}
select:nth-child(2){
  -webkit-box-align:center;
  -moz-box-align:center;
  box-align:center;
}
select:nth-child(3){
  -webkit-box-align:end;
  -moz-box-align:end;
  box-align:end;
}

참고URL : https://stackoverflow.com/questions/5439782/i-want-to-vertical-align-text-in-select-box