웹 프론트엔드 CSS 개발 과정에서 우리는 웹 페이지의 아름다움과 사용자 경험을 위해 그림을 중앙에 배치해야 하는 상황을 피합니다. 사진을 중앙에 맞추는 다양한 방법, 오늘은 CSS로 이미지를 중앙에 맞추는 세 가지 방법을 자세히 소개하겠습니다!
1 :1 <p class="img_wrap"> 2 <img src="wgs.jpg"> 3 </p>
1 .img_wrap{
2 width: 400px;
3 height: 300px;
4 border: 1px dashed #ccc;
5 display: table-cell; //主要是这个属性
6 vertical-align: middle;
7 text-align: center;
8 }3 이미지 외부에 p 태그를 사용하고 
line-height
1 <p class="img_wrap"></p>
.img_wrap{
width: 400px;
height: 300px;
border: 1px dashed #ccc;
background: url(wgs.jpg) no-repeat center center;
}
css 이미지를 중앙에 맞추는 방법
css 이미지 중심 맞추기: CSS 이미지를 위, 아래, 왼쪽, 오른쪽(가로 및 세로 중심)
HTML 코드 센터 텍스트와 이미지를 구현하는 방법은 무엇입니까?
위 내용은 CSS를 사용하여 이미지를 중앙에 배치하는 세 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
