简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

CSS를 통해 HTML 텍스트 상자의 텍스트 수직 중심을 제어하는 ​​방법에 대한 자세한 설명

高洛峰
풀어 주다： 2017-03-06 17:11:23
원래의
2259명이 탐색했습니다.

Text의 height 속성을 정의하면 Text에 입력되는 텍스트가 세로로 가운데 정렬되지 않지만 CSS를 통해 제어할 수 있습니다. 아래에 좋은 예가 있으니 참고하시면 됩니다. Text의 height 속성을 정의하면 Text에 입력되는 텍스트가 수직 중앙에 위치하지 않습니다. 그러나 CSS를 추가하여 입력된 텍스트가 수직 중앙에 위치하도록 제어하여 웹 페이지를 더욱 완벽하게 만들 수 있습니다.

코드는 다음과 같습니다:

<html> 
<head> 
<style type="text/css"> 
#text { 
height:20px; 
vertical-align:middle; 
line-height:20px; /*line-height must be equal to height*/ 
} 
</style> 
</head> 
<body> 
<table> 
<input type="text" id="text"> 
</table> 
</body> 
</html>
로그인 후 복사


verticla-align 및 line-height 두 가지 속성을 추가하면 텍스트 상자의 텍스트가 세로로 중앙에 배치됩니다. 텍스트 상자의 줄 높이는 높이와 같아야 합니다.

CSS를 통해 HTML 텍스트 상자에서 텍스트의 세로 가운데 정렬을 제어하는 ​​방법에 대한 자세한 내용은 PHP 중국어 웹사이트를 참고하세요!

관련 라벨：
수직으로 중앙에 위치 文本框
원천：php.cn
이전 기사：HTMLimg 태그의 alt 속성, title 속성 사용 소개 및 분석 다음 기사：div의 콘텐츠가 초과된 후 스크롤 막대를 자동으로 표시하도록 HTML 설정 분석 예
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
XML 파일에 개행 문자(개행 문자)를 추가하는 방법은 무엇입니까? XML 파일이 있고 "SampleText123" 텍스트를 이 SampleText123처럼 줄 바꿈하려고 합니다. &#xA&#xD\...
에서 2023-11-16 16:42:38
0
1
199
Apache 구성에서 파일 업로드 크기 늘리기 여러분, 안녕하세요! Apache 구성에서 파일 업로드 크기 용량을 늘리려고 하지만 정확히 수행하는 방법을 모르기 때문에 이 구성 문제로 어려움을 겪고 있습니다....
에서 2023-11-11 11:00:33
0
1
287
제목: 흰색을 제외한 모든 색상 배경에서 흰색 텍스트 가시성 확보 mix-blend-mode 사용: 텍스트 색상을 흰색으로 변경하는 차이점은 배경 색상이 검은색일 때 잘 작동합니다. 효과를 보려면 마우스를 텍스트로 이동하십시오....
에서 2023-11-10 16:59:01
0
1
311
Vue 개발 도구의 구성 요소 옆에 있는 성능 수치는 무엇입니까? Vue 개발 도구의 특정 기능에 대한 통찰력이나 리소스를 갖고 있는 사람이 있나요? 구성 요소 창에는 구성 요소가 표시되고 작은 빨간색과 노란색 사각형이 표시되며...
에서 2023-11-09 14:46:48
0
1
305
Laravel 8의 블레이드 자산을 사용하여 이미지를 표시하지만 리소스 하위 폴더에서 로드 저는 Laravel을 처음 접했으므로 양해해 주시기 바랍니다. Node/React에서 개발한 프레임워크를 Laravel에 복사하고 있습니다. 현재 저는 기본 아키...
에서 2023-11-09 12:47:02
0
1
314
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！