이미지와 캡션을 포함하는 div (이미지로)

Question

나는 이것이 왜 작동하지 않는지 알아 내려고 노력하고 있습니다. 나는 그것을 많이 연구했고 올바른 대답을 찾지 못하는 것처럼 보였습니다.

나는 DIV 항목 집합이 테이블이 인라인으로 표시되어 수직으로 쌓인 2 셀 테이블처럼 동작하려고합니다. 화면을 가로 지르고 (반응하는 모양을 위해) 텍스트처럼 부서집니다. 상단 셀과 하단 셀은 고정 된 크기이며 각각의 이미지 (하나의 아트 축소판 및 하나의 필기 캡션)는 셀 내에서 세로 및 가로 가운데에 배치됩니다. 여기 내 코드입니다 :

CSS & HTML 어쨌든

div.artpluslabel { 
 
\t width: 275px; 
 
\t height: 375px; 
 
\t position: relative; 
 
\t display: inline-table; 
 
} 
 

 
div.artContainer { 
 
\t width: 275px; 
 
\t height: 325px; 
 
\t text-align: center; 
 
\t position: absolute; 
 
\t display: table-cell; 
 
\t vertical-align: middle; 
 
} 
 

 
div.label { 
 
\t width: 275px; 
 
\t height: 50px; 
 
\t text-align: center; 
 
\t position: absolute; 
 
\t display: table-cell; 
 
\t vertical-align: middle; 
 
}

<div class="artpluslabel"> 
 
    <div class="artContainer"> 
 
     <a href = "art.php?id=', $ids[$i], '"> 
 
      <img class = "art" src = "img/art/filename.gif"> 
 
     </a> 
 
    </div> 
 
    <div class="label"> 
 
     <a href = "art.php"> 
 
      <img src = "img/art_labels/filename.png"> 
 
     </a> 
 
    </div> 
 
</div>

, 그것은 않는 유일한 것은 테두리를 추가 한, 이미지의 "예술"클래스를 무시합니다.

이것이 올바르게 나타나지 않는 이유를 모르겠습니다. 이것은 기본적인 것이어야합니다. 라벨 부분이 아래에 스태킹되는 대신 아트 이미지에 겹쳐집니다.

아무도 없습니까? 이 문제를 해결하기 위해 상당한 시간을 보냈습니다.

감사합니다.

Answer 1

<div class="artpluslabel"> 
    <div class="artContainer"> 
     <a href = "art.php?id=', $ids[$i], '"> 
      <img class = "art" src = "img/art/filename.gif"> 
     </a> 
    </div> 
    <div class="label"> 
     <a href = "art.php"> 
      <img src = "img/art_labels/filename.png"> 
     </a> 
    </div> 
</div> 

CSS

.artpluslabel { 
    display: flex; 
    justiy-content: space-between; 
    flex-wrap: wrap; 
    width: 550px; 
} 

.artContainer, .label { 
    width: 50%; 
    height: 300px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

나는 이것에 대해 확실하지 않다. 내가 잘 작동하기 때문에 나는 항상 flexbox를 사용했다. 이 시도.