이미지를 세로로 중앙에 배치하는 방법을 찾고 text-align center있습니다. text-aligncenter는 부모의 너비 나 자식의 너비를 지정할 필요가 없기 때문에 효율적입니다. 자동으로 콘텐츠를 가운데에 배치합니다. 이미지를 세로로 배치하기 위해 이와 같은 작업을 수행하는 다른 방법이 있습니까?
두 가지 방법으로 할 수 있습니다
방법 1 ( 선호 ), 사용하여display: table-cell
div {
display: table-cell;
height: 100px;
border: 1px solid #f00;
vertical-align: middle;
}
방법 2, 사용 position: absolute;및 사용 top: 50%하여 총 height이미지의 1/2을 공제margin-top
div {
height: 100px;
border: 1px solid #f00;
position: relative;
}
div img {
position: absolute;
top: 50%;
margin-top: -24px; /* half of total height of image */
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다