>  기사  >  웹 프론트엔드  >  이미지용 CSS div 센터링 코드를 작성하는 방법

이미지용 CSS div 센터링 코드를 작성하는 방법

藏色散人
藏色散人원래의
2021-01-04 10:22:022941검색

이미지 CSS div 센터링 코드 작성 방법: 먼저 표시를 table-cell로 설정한 다음 가로 센터링을 텍스트 정렬을 가운데로 설정하고 마지막으로 세로 센터링을 세로 정렬을 가운데로 설정합니다.

이미지용 CSS div 센터링 코드를 작성하는 방법

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

권장: "css 비디오 튜토리얼"

몸 구조

<body>
<div>
<img src="1.jpg" alt="haha">
</div>
</body>

방법 1:

디스플레이를 테이블 셀로 설정한 다음 텍스트 정렬을 가운데로 설정하여 수평 중앙에 맞추고 수직 정렬을 가운데로 설정하여 수직 중앙에 놓습니다. .

<style type="text/css">
*{margin: 0;padding: 0;}
    div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
        width: 50px;
  height: 50px;
}
</style>

결과는 아래 그림과 같습니다.

이미지용 CSS div 센터링 코드를 작성하는 방법

방법 2:

위치 위치 지정을 통해 달성. div를 상대 위치로 설정하고, img를 절대 위치로 설정합니다. 왼쪽: 50%, 위쪽: 50% 이때 이미지의 왼쪽 상단이 div의 중앙에 위치합니다. 이미지가 div 중앙에 있으므로 이미지를 이동해야 합니다. 이미지 높이의 절반은 위로 이동하고 너비의 절반은 왼쪽으로 이동합니다.

<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
left: 50%;
  margin-top: -25px; /* 高度的一半 */
  margin-left: -25px; /* 宽度的一半 */
}
</style>

결과는 아래 그림과 같습니다.

이미지용 CSS div 센터링 코드를 작성하는 방법

방법 3: 그림이나 요소의 실제 너비와 높이가 명확하지 않을 때 사용할 수 있습니다

또는 위치 지정을 통해 얻을 수 있습니다. div를 상대 위치로 설정하고, img를 절대 위치로 설정합니다. 왼쪽: 50%, 위쪽: 50% 이때 이미지의 왼쪽 상단이 div의 중앙에 위치합니다. 이미지가 div 중앙에 있으므로 이미지를 이동해야 합니다. 이미지 높이의 절반을 위로 이동하고 이미지 너비의 절반을 왼쪽으로 이동합니다. 요소의 너비와 높이를 모르는 경우 다음을 사용할 수 있습니다. 변환: 번역(-50%,-50%);

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>

방법 4:

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>

방법 5: 유연한 레이아웃 flex

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        border:1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    img {
        width: 50px;
        height: 50px;
    }
</style>

효과는 동일합니다. 모두에게 도움이 되기를 바랍니다!

위 내용은 이미지용 CSS div 센터링 코드를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.