텍스트 좌우 가운데 맞춤을 위한 CSS 노트

select text-align:center가 작동하지 않음

select 라벨의 문자를 좌우로 가운데로 하고 싶어요.text-align: center; 유효하지 않음
백분율text-indent을 지정하면 들여쓰기
글자 수가 확실하지 않으면 좋지 않다.
무리한 방법이긴 한데.
미리 select의 텍스트 자체를 투명하게 하고 select와 같은 폭의 p에 같은 텍스트를 넣고 그 안에 text-align:center를 넣는 샘플입니다.

샘플 프레젠테이션

Codepen
http://codepen.io/skwbr/pen/JYGQLv

코드

html

<div class="btn-select">
<p class="label">選択してください</p>
<select class='select'>
  <option value=''>選択してください</option>
  <option value='1'>選択肢1</option>
  <option value='2'>選択肢2</option>
  <option value='3'>選択肢3</option>
</select>
</label>
</div>

시작p는 select 위에 놓고pointer-events: none; 클릭을 뒷면(select)으로 보내지만 IE 10 이전pointer-events에는 작동하지 않는 것 같아서 opacity로select를 투명하게 하고 클릭을 받으면 뒷면의 p를 볼 수 있다.
css

body {
  text-align: center;
}

.btn-select {
  width: 300px;
  margin: 20px auto;
  position: relative;
  background: #333;
  border-radius: 6px;
  cursor: pointer; /* IEでcursorがチラついたので */
}

.label {
  color: #fff;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  cursor: pointer;
  width: 100%;
  border: none;
  padding: 20px;
  opacity: 0;
  position: relative;
  z-index: 2;
}

/* IE10以上で矢印を消す */
.select::-ms-expand {
  display: none; 
}

/* フォーカス時 */
.select:focus {
  z-index: -1;
  opacity: 1;
}

탭이 변하지 않는 단추를 사용할 때 JS가 필요하지 않습니다
select와 마찬가지로 onchange로 탭을 바꾸려면 JS를 사용하십시오.
js

// selectと同じようにonchangeでラベルを変えたいときはJSを用いる
$('.select').on('change', function(){

  var $this = $(this)
  var $option = $this.find('option:selected');
  $('.label').text($option.text());

  // onchange後にフォーカスしてるのが嫌な場合
  $this.blur();

});

웹 접근성 문제도 있지만
하나의 예로 소개하다.

출전/참조

"CSS pointer-events (for HTML) | Can I use..."
http://caniuse.com/#feat=pointer-events
"CSS만 -Qita"사용자 정의http://qiita.com/hiloki@github/items/844726db4128ebb0fdd8