CSS를 통해 HTML 텍스트 상자의 텍스트 수직 중심을 제어하는 방법에 대한 자세한 설명
- 高洛峰원래의
- 2017-03-06 17:11:232306검색
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 중국어 웹사이트를 참고하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.