div의 그림이 수평 및 수직 중앙에 어떻게 배치되어 있는지 알아야 합니다.

div에서 이미지를 수평 및 수직으로 중앙에 배치하는 방법을 모르시면 됩니다. 여기서 편집기는 5가지 중앙 정렬 방법을 살펴보겠습니다.

본체 구조

	<p>
		<img  alt="div의 그림이 수평 및 수직 중앙에 어떻게 배치되어 있는지 알아야 합니다." >
	</p>

방법 1:
디스플레이를 테이블 셀로 설정한 다음 가로 가운데에 맞추려면 텍스트 정렬을 가운데로 설정하고, 세로 가운데에 맞추려면 세로 정렬을 가운데로 설정하세요.

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

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

방법 2:
위치 위치 지정을 통해 달성. p를 상대 위치로 설정하고, img를 절대 위치로 설정하면 왼쪽:50%, 위쪽:50%가 됩니다. 이때 그림의 왼쪽 상단이 그림의 중앙에 위치하게 됩니다. 이미지는 이미지 높이의 절반만큼 위로 이동하고 이미지 너비의 절반만큼 왼쪽으로 이동해야 합니다.

<style>
	*{margin: 0;padding:0;}
	p{
		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>

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

방법 3: 이미지나 요소의 실제 너비와 높이가 불분명할 때 사용할 수 있습니다
또는 위치 지정을 통해 얻을 수 있습니다. p를 상대 위치로 설정하고 img를 절대 위치로 설정합니다. 이때 그림의 왼쪽 상단은 그림의 중앙에 위치하게 됩니다. p의 중앙에서 그림을 이동해야 합니다. 이미지 높이의 절반을 위쪽으로 이동하고 이미지 너비의 절반을 왼쪽으로 이동합니다. 요소의 너비와 높이를 모르는 경우 변환을 사용할 수 있습니다. -50%,-50%);

<style>
    *{margin: 0;padding:0;}
    p{
        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>
    *{margin: 0;padding:0;}
    p{
        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>
    *{margin: 0;padding:0;}
    p{
        width:150px;
        height: 100px;
        border:1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    img {
        width: 50px;
        height: 50px;
    }
</style>

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

이 기사는 다음에서 복제되었습니다: https://blog.csdn.net/DreamFJ/article/details/68921957

추천 튜토리얼: "HTML Tutorial"

위 내용은 div의 그림이 수평 및 수직 중앙에 어떻게 배치되어 있는지 알아야 합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!