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
Post a Comment