디브 내부의 이미지와 수직으로 정렬하는 앵커

디브 내부의 이미지와 수직으로 정렬하는 앵커

이 질문에는 이미 다음과 같은 답이 있습니다.

디브 안에 닻을 올린 이미지를 수직 중심에 놓으려면 어떻게 해야 합니까? (1개 답변)

닫힘9년 전에.

이것을 위해 여러 가지 방법을 시도해 보았지만 도저히 이해할 수가 없습니다.프론트 엔드 작업을 3년 동안 한 후에 다소 당황스럽습니다. 하지만 나는 이것에 더 이상 시간을 낭비할 수 없습니다.

WordPress 이미지 갤러리가 있는데, 이미지의 중앙을 수직으로 맞춰야 합니다.높이, 선 높이 및 수직 정렬을 설정해 보았습니다: 중간 - 하지만 기쁨은 없습니다.

이미지는 사용자가 추가하기 때문에 크기와 총 개수가 고정적이지 않습니다. 따라서 개별 요소 높이를 구체적으로 목표로 하는 솔루션은 적합하지 않습니다.

URL: http://www.europa-international.net/

<dl class="gallery-item ">
<dt class="gallery-icon">
    <a href="http://www.europa-international.net/our-videos/snapshot-1-02-01-2014-15-33/" title="Snapshot 1 (02-01-2014 15-33)"><img width="125" height="70" src="http://www.europa-international.net/wp-content/uploads/2013/07/Snapshot-1-02-01-2014-15-33.png" class="attachment-homepage-gallery" alt="Latest Promo Videos"></a>
</dt>
<dd class="wp-caption-text gallery-caption">Latest Promo Videos</dd>

#gallery-1 .gallery-icon {
    height: 104px;
    line-height: 104px;
}
#gallery-1 .gallery-icon a {
    vertical-align: middle;
}

그리고 이 사이트에서 논의된 많은 변형(앵커 높이/라인 높이 제공:104 px, 디스플레이:블럭, 세로-align:중간).

편집: 여기에 fiddle 게시하기: http://jsfiddle.net/DE4ph/2/

또한 - 중복응답 솔루션은 WordPress에서 생성되는 마크업을 (쉽게) 변경할 수 없기 때문에 적합하지 않습니다.

상위 컨테이너에 컨테이너 자체와 동일한 값(예: 200px)의 선 높이를 지정한 다음 이미지에 수직 정렬:middle을 설정하면 됩니다.

.gallery-icon { 
    height: 200px; 
    line-height: 200px; 
}
.gallery-icon img { 
    vertical-align:middle; 
}

참조: http://jsfiddle.net/B78nD/

컨테이너 div를 relative(상대) 위치로 설정한 다음 다음 다음 스타일을 앵커에 추가하는 방법이 많습니다.

위치: 절대; 표시: 인라인 블록; 왼쪽: 50%; 상단: 50px; 여백-왼쪽: -62.px; 여백-위: -35px;

또 다른 옵션은 수직 정렬을 사용하는 것입니다.

#gallery-1 .gallery-icon {
    height: 104px;
}
#gallery-1 .gallery-icon a {
     line-height: 104px;
}

#gallery-1 .gallery-icon a img {
     vertical-align: middle;
}

그건 그렇고 이미지 자체가 앵커 내부에 있는 디브 내부에 있다면 HTML로 권장되지 않는 방법으로 알고 있습니다. 대신 이미지의 표시를 블록 또는 인라인 블록으로 변경할 수 있습니다.

언급URL : https://stackoverflow.com/questions/21587169/vertically-align-anchor-with-image-inside-a-div