CSS에서 img를 수직으로 가운데에 맞추는 방법

CSS에서 img를 중앙에 배치하는 방법은 무엇입니까? img를 수직으로 중앙에 배치하는 방법은 무엇입니까? CSS를 이제 막 사용하기 시작한 초보자들은 익숙하지 않을 수도 있습니다. CSS에서 img를 세로로 가운데에 배치하는 방법을 요약해 보겠습니다.

다음 세 가지 방법을 포함하여 img를 수직으로 중앙에 맞추는 방법은 여러 가지가 있습니다.

1 flex를 사용하여 img를 수직으로 중앙에 배치합니다.

CSS에서는 flex를 사용하여 수직 중앙에 배치할 수 있지만 flex는 그렇지 않습니다. 좋은 방법은 아닙니다. 현재 IE8 및 9와 같은 많은 브라우저는 flex를 지원하지 않습니다.

먼저 지원 이미지에 div를 추가하고 너비 100px, 높이 100px로 정의하고 이에 대한 몇 가지 기본 속성을 정의해야 합니다. 그 중 div의 표시 요소를 flex로 설정합니다. 그런 다음 또 다른 align-items: center 속성을 추가합니다.

css 코드:

body{ background:#999}
.flexbox{width: 300px;height: 250px;background:#fff;display: flex;align-items: center}
.flexbox img{width: 100px;height: 100px;align-items: center;}

2 디스플레이를 사용하여 img의 수직 중심 맞추기

먼저 div를 만들고 사진이 포함된 div의 스타일을 설정하면 img의 상위 항목에 diaplay를 추가할 수 있습니다. img이고 속성은 table이고 이미지가 포함된 div의 표시 속성은 table-cell로 설정되어 있습니다. 실제로 센터링을 달성하기 위해 해야 할 일은 div에 대해 Vertical-align: middle; 속성을 설정하는 것입니다. 이미지가 포함되어 있습니다.

css 코드:

.tablebox{width: 300px;height: 250px;background: #fff;display: table}
#imgbox{display: table-cell;vertical-align: middle;}
#imgbox img{width: 100px}

3.

를 달성하기 위해 이미지의 절대 위치 지정을 사용합니다. 이미지가 있는 div에 배경이 있도록 설정하고 img의 상위 요소에 상대 속성을 추가하고 절대 및 추가 하위 요소 속성과 관련하여 상단 값을 50%로 설정해야 합니다. 이제 해야 할 일은 img 요소에 음수 margin-top 값을 설정하는 것입니다.

css 코드:

body{background: #ccc;}
.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}

위의 세 가지 방법 중 세 번째 방법을 사용하는 것이 좋습니다. 세 번째 방법은 호환성이 더 좋고 상대적으로 간단하며 방법과 원리를 익히는 데 중점을 둡니다.

위는 CSS를 사용하여 img를 수직 중앙에 배치하는 방법에 대한 전체 소개입니다. CSS3 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트에 주목하세요.

위 내용은 CSS에서 img를 수직으로 가운데에 맞추는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!