입력 내부에 텍스트를 정렬하는 방법은 무엇입니까?

입력 내부에 텍스트를 정렬하는 방법은 무엇입니까?

---

모든 기본 입력의 경우 입력 한 텍스트가 왼쪽에서 시작됩니다. 오른쪽에서 어떻게 시작합니까?

---

사용 텍스트 정렬 하여 CSS의 속성을 :

input { 
    text-align: right; 
}

이것은 페이지의 모든 입력에 적용됩니다.
그렇지 않으면 하나의 입력 텍스트 만 정렬하려면 스타일을 인라인으로 설정하십시오.

<input type="text" style="text-align:right;"/> 

---

CSS에서 이것을 시도하십시오 :

input {
text-align: right;
}

텍스트를 중앙에 맞추려면

input {
text-align: center;
}

그러나 이것이 기본값이므로 왼쪽 정렬되어야하며 가장 사용자 친화적 인 것으로 보입니다.

---

여기 있습니다 :

input[type=text] { text-align:right }

<form>
    <input type="text" name="name" value="">
</form>

---

여기에 허용 된 답변은 정확하지만 약간의 정보를 추가하고 싶습니다. 부트 스트랩과 같은 라이브러리 / 프레임 워크를 사용하는 경우이를 위해 클래스가 내장 될 수 있습니다. 예를 들어 부트 스트랩은 text-right클래스를 사용합니다 . 다음과 같이 사용하십시오.

<input type="text" class="text-right"/> 
<input type="number" class="text-right"/>

참고로 이것은 위에 표시된 숫자와 같은 다른 입력 유형에서도 작동합니다.

부트 스트랩과 같은 멋진 프레임 워크를 사용하지 않으면이 도우미 클래스의 자체 버전을 만들 수 있습니다. 다른 답변과 비슷하지만 입력 클래스에 직접 추가하지 않으므로 사이트 또는 페이지의 모든 단일 입력에 적용되지는 않지만 이는 바람직한 동작이 아닙니다. 따라서 이것은 인라인 스타일링이 필요하지 않거나 모든 단일 입력 상자에 영향을 미치지 않고 물건을 올바르게 정렬하는 멋진 CSS 클래스를 만듭니다.

.text-right{
    text-align: right;
}

이제이 클래스를 위의 입력과 동일하게 사용할 수 있습니다 class="text-right". 많은 키 입력을 저장하지는 않지만 코드를 깨끗하게 만듭니다.

---

텍스트가 포커스를 잃은 직후 오른쪽에 맞추려면 방향 수정자를 사용하십시오. 초점을 잃은 후 텍스트의 오른쪽 부분이 표시됩니다. 예를 들어 파일 이름을 큰 경로로 표시하려는 경우 유용합니다.

input.rightAligned {
  direction:ltr;
  overflow:hidden;
}
input.rightAligned:not(:focus) {
  direction:rtl;
  text-align: left;
  unicode-bidi: plaintext;
  text-overflow: ellipsis;
}

<form>
    <input type="text" class="rightAligned" name="name" value="">
</form>

not selector는 현재 잘 지원됩니다 : 브라우저 지원

---

CSS없이 : 텍스트 입력의 STYLE 속성 사용

STYLE = "텍스트 정렬 : 오른쪽;"

참고 URL : https://stackoverflow.com/questions/12114570/how-to-align-texts-inside-of-an-input