그 안에서) 가로 중앙에 위치합니다.
예(위치 사용):
<div style="position: relative; height: 100vh;">
<input type="text" placeholder="使用position定位的文本框" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
</div>
로그인 후 복사
여기서 상위 요소는 상대 위치(위치: 상대;)로 설정되고, 텍스트 상자는 절대 위치(위치: 절대;)로 설정됩니다. 텍스트 상자의 왼쪽 상단 모서리를 top: 50%; 및 left: 50%;를 통해 상위 요소의 중심으로 이동한 다음, 변환: 변환(-50%, -50%);을 사용하여 자체 중심을 다음으로 이동합니다. 그 지점에서 센터링 효과를 얻을 수 있습니다.
참고:
정렬 선택은 특정 요구 사항과 레이아웃 컨텍스트에 따라 다릅니다.
인라인 스타일 사용을 피하고 대신 더 나은 관리 및 재사용을 위해 별도의 CSS 파일에 스타일을 정의하십시오.
CSS 재설정을 사용하거나 CSS를 정규화하여 브라우저 간의 기본 스타일 차이를 없애는 것을 고려해 보세요.
Flexbox 또는 Grid와 같은 최신 레이아웃 기술을 사용하는 경우 대상 브라우저가 이러한 기능을 지원하는지 확인하거나 이전 브라우저와의 호환성을 위한 대체 솔루션을 제공하세요.
위 내용은 HTML에서 텍스트 상자를 정렬하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!