html - Divs for containing image and caption (as image) -


i have been going nuts trying figure out why isn't working. have researched lot , can't seem find right answer:

i trying make set of div items act vertically stacked two-cell table table displays inline can span across screen , break text (for responsive appearance). top cell , bottom cell fixed sizes , images within each (one art thumbnail , 1 handwritten caption) centered vertically , horizontally within cells. here code:

css & html

div.artpluslabel {  	width: 275px;  	height: 375px;  	position: relative;  	display: inline-table;  }    div.artcontainer {  	width: 275px;  	height: 325px;  	text-align: center;  	position: absolute;  	display: table-cell;  	vertical-align: middle;  }    div.label {  	width: 275px;  	height: 50px;  	text-align: center;  	position: absolute;  	display: table-cell;  	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>

anyway, ignore "art" class image, thing add border.

i don't understand why doesn't appear correctly. should basic thing. happens label portion overlaps art image instead of stacking underneath.

anybody see problem? i've spent quite time trying fix this.

thanks!

<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; } 

i not sure this. used flexbox time because works me. try this.


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -