자바스크립트 센터 텍스트

Michael Zippo

이 CSS 자습서에서는 텍스트를 가운데에 맞추고 요소를 잠그는 방법을 살펴보겠습니다. 레이아웃에서 요소를 가로 및 세로로 가운데에 맞추는 데 사용할 수 있는 몇 가지 팁이 있습니다.

더 큰 요소에서 정렬된 텍스트를 가운데에 맞추려면 아래와 같이 text-align: center;를 사용하세요. :

저는 a div

그리고 모든 텍스트는 text-align: center

중심 맞춤 블록 요소:

블록 요소의 중심은 HTML 문서의 태그를 사용하여 가장 잘 설명됩니다. 컨테이너의 전체 너비를 확인한 다음 여백을 auto로 설정하기만 하면 됩니다.

저는 div입니다.

모든 텍스트는 text-align: center

이미지를 중앙에 정렬:

이미지를 중앙에 맞추려면 CSS 선택기에서 대량 표시를 수정한 다음 % 또는 px를 사용하여 이미지 요소의 너비. margin을 auto로 설정:

기본 이미지를 가운데에 맞추려면 표시를 차단으로 변경한 다음 여백을 자동으로 설정하고 px 또는 %를 사용하여 너비를 확인하십시오.

div에서 세로 및 가로 중앙:

패딩:

에서 패딩을 조정하는 것입니다. 그런 다음 text-align: center를 사용하여 단락을 가로로 가운데에 맞출 수 있습니다. < br >

기본 이미지를 가운데에 맞추려면 표시를 차단으로 변경한 다음 여백을 자동으로 설정하고 px 또는 %를 사용하여 너비를 확인하십시오.

줄 높이:

라인 높이를 텍스트 -align: center로 가운데에 맞추는 블록 요소의 높이로 설정하여 요소를 가운데에 정렬할 수도 있습니다. 여러 줄이 있는 경우 부모와 자식에 line-height를 사용하고 vertical-align: middle 및 display: inline-block을 자식에 추가합니다. < br>

transform:

요소를 중앙에 배치하는 또 다른 방법은 위치 및 변환을 사용하는 것입니다. 부모를 상대 위치에 배치하고 자식을 절대 위치에 배치합니다. 자식 요소는 50%에서 위쪽과 왼쪽에 배치해야 하며, 그런 다음 transform 속성을 사용하여 div의 텍스트를 조정합니다. 이 속성에 대한 자세한 내용은 다른 기사에서 다루므로 현재 100% 명확하지 않아도 괜찮습니다.

flexbox:

마지막으로 flexbox를 사용하여 요소를 중앙에 배치할 수 있습니다. display: flex를 중앙에 배치하려는 하위 요소의 상위 요소로 설정한 다음 align-items 및 require-content를 사용하여 중앙에 배치합니다.

레이아웃에서 요소 중심 문제를 해결하는 가장 일반적인 방법입니다.