이미지를 표시하기 위해 CSS에서 div를 중앙에 배치하는 방법

이미지를 표시하기 위해 CSS에서 div를 중앙에 배치하는 방법: 1. "margin:0 auto;"와 같은 코드로 이미지의 여백 속성을 사용하여 이미지를 수평으로 중앙에 배치합니다. 2. div의 패딩 속성을 사용하여 "padding-top:50px;"와 같은 코드를 사용하여 이미지를 세로 중앙에 배치합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터, HTML5&&CSS3 버전.

CSS를 사용하여 div의 이미지를 중앙에 배치하는 방법은 무엇입니까?

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

이미지의 margin 속성을 사용하여 이미지를 수평 중앙에 배치하고, div의 padding 속성을 사용하여 이미지를 수직 중앙에 배치합니다.

구조 코드는 위와 동일합니다.

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

div {
width:300px;
height:150px; 
background-color:#eee; 
padding-top:50px; 
border:#000 1px solid;
}
 
img {display:block; margin:0 auto;}

참고:

img는 여백 속성을 가운데로 설정하려면 블록 요소로 변환해야 합니다. display:block; 사용 후 margin: 0 auto; 이미지의 수평 중심 맞추기(일부 디자이너는 이미지에 div 태그를 추가한 다음 div 태그의 여백을 사용하여 중심 맞추기) align 속성을 사용하여 이미지를 가로 중앙에 배치한 다음 padding-top을 설정합니다. 값을 사용하면 세로 중앙에 배치됩니다.

구조는 다음과 같습니다.

<style type="text/css">
 div{
  width:180px;
  height:180px;
  border:1px solid #000;
  position:relative;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
 }
 div p{
  position:static;
  +position:absolute;
  top:50%;
 }
 div img{
  position:static;
  +position:relative;
  top:-50%;
  left:-50%;
 }
 </style>
 
<div><p><img src="0225/12986229678396.jpg" width="120" height="120"></p></div><br>
<div><p><img src="0225/12986229678396.jpg" width="160" height="160"></p></div>

방법 2

<div>
<img src="images/tt.gif" width="150" height="100" />
</div>
css样式如下：
div {
width:300px; 
height:150px;
background-color:#ccc; 
border:#000 1px solid; 
text-align:center; 
padding-top:50px;
}

(권장:

css 비디오 튜토리얼

)

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