중앙 정렬 방법: 1. 상자의 상대 위치와 그림의 절대 위치를 설정한 다음 그림의 위치를 조정합니다. 2. img 이미지 요소를 블록 수준 요소로 설정한 다음 table-cell 및 "vertical-align:middle;"을 사용하여 중앙에 배치합니다. 3. Flexbox 레이아웃을 사용하여 중앙에 배치합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css를 사용하여 div 상자의 이미지 중앙에 배치
첫 번째 방법: CSS의 위치 속성을 사용합니다
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .div1 { width: 200px; height: 200px; border: 1px solid #000000; position: relative; } img { width: 100px; height: 100px; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } </style> </head> <body> <div class="div1"> <img src="img/1.jpg" / alt="CSS 상자에서 이미지를 중앙에 배치하는 방법" > </div> </body> </html>
렌더링:
두 번째 방법: 다음의 새 속성 테이블을 사용합니다. css3 -cell, Vertical-align:middle;
nbsp;html> <meta> <style> .div { width: 200px; height: 200px; border: 1px solid #000000; display: table-cell; vertical-align: middle; } img { width: 100px; height: 100px; display: block; margin: auto; } </style> <div> <img alt="CSS 상자에서 이미지를 중앙에 배치하는 방법" > </div>
효과:
[추천 튜토리얼: CSS 비디오 튜토리얼 ]
세 번째 방법: Flexbox 레이아웃 사용
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .div { width: 200px; height: 200px; border: 1px solid #000000; display: flex; /*!*flex-direction: column;*!可写可不写*/ justify-content: center; align-items: center; } img { width: 100px; height: 100px; display: block; margin: auto; } </style> </head> <body> <div class="div"> <img src="img/1.jpg" / alt="CSS 상자에서 이미지를 중앙에 배치하는 방법" > </div> </body> </html>
효과:
네 번째 방법: 변환 속성 사용(단점: Html5 지원 필요)
nbsp;html> <meta> <style> .div { width: 200px; height: 200px; border: 1px solid #000000; position: relative; } img { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> <div> <img alt="CSS 상자에서 이미지를 중앙에 배치하는 방법" > </div>
렌더링:
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
위 내용은 CSS 상자에서 이미지를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!