> 웹 프론트엔드 > HTML 튜토리얼 > CSS 센터링 방법은 무엇입니까?

CSS 센터링 방법은 무엇입니까?

零下一度
풀어 주다: 2017-06-24 14:31:27
원래의
1633명이 탐색했습니다.

1.text-align:center;

위 방법을 사용하여 중앙에 배치하는 것은 상위 컨테이너의 인라인 요소 또는 display:inline의 텍스트를 수평으로 중앙에 배치하는 것입니다.

2.inline-height: (높이) 값

인라인 높이를 사용할 때는 내용을 세로로 가운데에 배치하기 위해 높이와 함께 사용하는 경우가 많습니다.

3.margin :auto;

 중앙에 여백을 사용하는 경우 일반적으로 요소가 정확한 너비 값을 제공하는 경우 margin:auto; 또는 margin: 0 auto를 설정하면 현재 요소가 가로로 중앙에 배치됩니다.

사용 여백을 사용하는 경우 margin-left와 margin-right의 값을 동일하게 설정할 수도 있으며 수평 센터링도 가능합니다.

4. 위치 위치 지정 및 센터링

 에 따라 설정; 위쪽과 왼쪽 또는 아래쪽과 오른쪽은 요소를 수평으로, 수직으로 중앙에 배치할 수 있지만 상위 요소는 높이를 설정해야 합니다.

  Flex 컨테이너의 flex-align:center;

  -items: center;

  justify-cotent:center;

 항목 속성 align-self:center;

6. 음수 여백:

 1 .box { 2     width: 600px; 3     height: 400px; 4     position: relative; 5 } 
 6  7 .box1 { 8     width: 300px; 9     height: 200px;10     padding: 20px;11     position: absolute;12     top: 50%;13     left: 50%;14     margin-left: -170px;/*(width+padding)/2 */15     margin-top: -120px;/*(height+padding)/2 */16 }
로그인 후 복사

  위의 코드는 요소의 가로 및 세로 중앙 정렬을 구현할 수 있습니다.

위 내용은 CSS 센터링 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿