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

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

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

CSS에서 text-align 속성을 사용합니다.

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>

선택기가 현재 잘 지원되지 않습니다. 브라우저 지원

다음 방법이 유용할 수 있습니다.

<style>
   input {
         text-align: right !important; 
   }
   textarea{
        text-align:right !important;
   }
   label {
       float: right !important;
   }
</style>

부트스트랩 5를 사용하면 이제 class="text-end"가 됩니다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<input step="any" id="myInput" type="number" class="text-end">

참조: https://getbootstrap.com/docs/5.0/utilities/text/ #text-정렬

@Html.TextBoxFor(모델 = > 모델).이슈 날짜, 새 {@class = "form-control", 이름 = "inv_issue_date", ID = "inv_issue_date", 제목 = "청구서 발행 날짜 선택", 자리 표시자 = "dd/mm/yyyyy", 스타일 = "text-align:center;"}

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

CSS 사용 안 함: 텍스트 입력의 STYLE 속성 사용

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

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