Css에서 이미지를 중앙에 배치하는 방법: 1. "
"를 설정합니다. 2. CSS 코드를 설정합니다. 3. 상위 요소의 스타일을 설정합니다. 4. "max"를 설정합니다. - 너비:100% 최대 높이:100%"이면 충분합니다.
이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
css를 사용하면 이미지를 중앙에 맞출 수 있습니다.
css를 사용하면 이미지가 정사각형, 수직 또는 수평 이미지인지에 관계없이 이미지가 상위 프레임 아래에 중앙에 위치할 수 있습니다. 정사각형 이미지는 전체 상위 프레임을 차지합니다. 왼쪽 및 오른쪽 패딩은 위쪽 및 아래쪽 중앙에 있습니다. html은 다음과 같습니다.
<body> <p id="redblock"> <img src="katong.png" > /*这里的图片路径自己设置*/ </p> </body>
2 .css는 다음과 같습니다
body{
background-color: gray;
}
#redblock{
text-align: center;
display: table-cell;
vertical-align: middle;
width:400px;
height: 400px;
background-color: red;
}
img{
max-width: 100%;
max-height: 100%;
}3. 상위 요소의 스타일을 설정합니다.
a. 너비와 높이를 설정합니다.
b. text-align:center Vertical-align:middle
을 설정합니다. 디스플레이:table-cell
4을 설정합니다. Img 최대 높이:100%
5에 대해 최대 너비:100%를 설정합니다. 디스플레이 효과는 다음과 같습니다:
가로 그림
정사각형 사진
세로 사진
추천 학습: css 비디오 튜토리얼
위 내용은 CSS에서 이미지를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
