CSS에서 이미지를 중앙에 배치하는 방법
- 藏色散人원래의
- 2021-07-26 11:03:1810496검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS에서 div 불투명도를 설정하는 방법다음 기사：CSS에서 div 불투명도를 설정하는 방법