HTML에서 텍스트를 가운데 정렬하는 방법은 무엇입니까? (코드 예)
- 藏色散人원래의
- 2018-08-10 17:38:0360196검색
이 글에서는 주로 HTML 텍스트 센터링 코드 작성 방법을 소개합니다. 도움이 필요한 사람들에게 도움이 되기를 바랍니다.
html 텍스트 센터링 코드의 구체적인 예는 다음과 같습니다.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>html文字居中测试</title>
<meta charset="UTF-8">
<style type="text/css">
body{background: #ddd;}
div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;}
.box1{background: #71a879;text-align: center;}
.box2{background: #6a8bbc;line-height: 200px;}
.box3{background: #dea46b;text-align: center;line-height: 200px;}
</style>
</head>
<body>
<div class="box1">html文字水平居中</div>
<div class="box2">html文字垂直居中</div>
<div class="box3">html文字水平上下居中</div>
</body>
</html>위 코드의 효과는 아래와 같이 로컬에서 테스트됩니다. :
그래서 이 글을 통해 HTML 텍스트 센터링에 대한 관련 지식을 더 잘 이해할 수 있을까요? 실제로 여기서는 HTML에서 텍스트를 중앙에 배치하는 CSS 코드를 주로 기억합니다.
1. text-align:center; text- align 속성은 요소 내 텍스트의 가로 정렬을 지정합니다.
이 속성은 줄 상자가 정렬되는 지점을 지정하여 블록 수준 요소 내에서 텍스트의 가로 정렬을 설정합니다. 사용자 에이전트가 줄 내용의 문자와 단어 사이의 간격을 조정할 수 있도록 허용함으로써 값 정렬이 지원됩니다. 다른 사용자 에이전트는 다른 결과를 얻을 수 있습니다.
2. 세로 가운데 맞춤: line-height:height;
line-height 속성은 줄 사이의 거리(줄 높이)를 설정합니다.
참고: 음수 값은 허용되지 않습니다.
위 내용은 HTML에서 텍스트를 가운데 정렬하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.