여백없이 입력 자리 표시 자

Question

SASS에서 생성 된, 가운데 자리 표시 자이지만 왼쪽 정렬 된 (일부 여백 포함) 입력 텍스트가있는 입력을 작성하려고합니다. 나는 아직도 CSS에 익숙하지 않으므로 무시해주십시오.

1. 내가 자리 표시 자 텍스트를 text-align:center
   , 나는 여전히 오른쪽으로 조금 정렬을 밀어 그 패딩이 있습니다

   (가) 패딩 왼쪽 입력 CSS에서, 나는이 문제를 생성하는 설정.

2. 입력에 50 % 너비를 설정하면 채우기가 고려되지 않으므로 부모 컨테이너의 몇 픽셀 + 50 %가됩니다. 다음
이

내 SASS 코드입니다 : 그것은 텍스트를 중심으로되지 않는다는 것을 추론하기 위하여 서 있도록 padding-left의 문제를 들어

input::-webkit-input-placeholder { 
color:white; 
text-align:center; 
} 
input[type=text],input[type=password],input[type=tel],input[type=email] { 
height:$formiconheight; 
width:$formItemMaxWidth; 
margin:5px; 
border-radius:5px; 
padding-left:$formiconwidth + $formInputPadding; 
} 

Answer 1

만, 왼쪽에 패딩을 추가. 패딩을 추가하거나 padding-left 및 padding-right에 동일한 금액을 추가하지 마십시오.

내용 상자의 경우 CSS의 너비. 내용, 채우기 및 테두리가 아닙니다. 패딩을 포함하려면 box-sizing: border-box (및 Firefox의 경우 -moz-box-sizing: border-box)을 포함해야합니다. 이렇게하면 너비에 패딩이 포함되도록 브라우저에 지시합니다.

또한 자리 표시 자의 WebKit 접두사 만 포함합니다.

input:-ms-input-placeholder { } 

과 : 파이어 폭스 < 19을 지원하려면

input::-moz-placeholder { } 

, 당신은 또한 포함되어야 파이어 폭스와 IE 또한 모두 다른 규칙 세트를 포함해야한다 있도록 자리 표시 자 스타일을 할 수 있도록 :

input:-moz-placeholder { }