CSS를 사용하여 이미지를 중앙에 배치하는 세 가지 방법

웹 프론트엔드 CSS 개발 과정에서 우리는 웹 페이지의 아름다움과 사용자 경험을 위해 그림을 중앙에 배치해야 하는 상황을 피합니다. 사진을 중앙에 맞추는 다양한 방법, 오늘은 CSS로 이미지를 중앙에 맞추는 세 가지 방법을 자세히 소개하겠습니다!

1 :

1 <p class="img_wrap">
2  <img src="wgs.jpg">
3 </p>

css 코드는 다음과 같습니다.

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

를 설정하여 이미지를 세로 중앙에 배치합니다. html 코드는 다음과 같습니다.

1 <p class="img_wrap"></p>

CSS 코드는 다음과 같습니다.

.img_wrap{
    width: 400px;
    height: 300px;
    border: 1px dashed #ccc;
    background: url(wgs.jpg) no-repeat center center;
}

렌더링은 다음과 같습니다.

요약:

이미지를 중앙에 배치하는 방법에는 여러 가지가 있습니다. 일반적으로 사용되는 세 가지 방법 친구들은 자신의 필요에 맞는 방법을 선택하세요. 작업에 도움이 되기를 바랍니다!

관련 추천:

css 이미지를 중앙에 맞추는 방법

css 이미지 중심 맞추기: CSS 이미지를 위, 아래, 왼쪽, 오른쪽(가로 및 세로 중심)

HTML 코드 센터 텍스트와 이미지를 구현하는 방법은 무엇입니까?

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