CSS 텍스트를 중앙에 배치하는 방법

CSS text-align

text-align 구문:

text-align : left | right | center | justify

text-align 매개변수 값 및 설명:

left : 왼쪽 정렬

right : 오른쪽 정렬

center : 가운데

*justify : align 양쪽 끝(권장하지 않음, 일반적으로 대부분의 브라우저에서 사용하지 않음)

텍스트 정렬에 일반적으로 사용되는 매개변수 값은 왼쪽, 오른쪽, 가운데입니다.

텍스트 정렬 기능 설명:

왼쪽, 개체 정렬에서 텍스트의 가운데와 오른쪽에 위치합니다.

사례 예:

3개의 상자를 설정하고 상자의 CSS 높이와 CSS 너비를 동일하게 설정한 다음 세 상자의 내용을 왼쪽, 가운데, 오른쪽 정렬로 설정합니다. 오른쪽.

세 상자의 높이를 50px로 설정하고 너비를 300px로 설정했습니다. 관찰하기 쉽도록 세 상자의 테두리 스타일을 검은색으로 설정했습니다.

1, HTML+CSS 코드

1), CSS 코드

.div1{ width:300px; height:50px; border:1px solid #000; text-align:left} 
.div2{ width:300px; height:50px; border:1px solid #000; text-align:center} 
.div3{ width:300px; height:50px; border:1px solid #000; text-align:right} 
/*  
div1 div2 div3 分别设置 靠左 居中 靠右对齐 
*/

2), HTML 코드

<div class="div1">我被靠左对齐</div> 
<div class="div2">我被居中显示</div> 
<div class="div3">我被靠右对齐</div>

위 내용은 CSS 텍스트를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!