CSS. Using table-footer-group with images.
In real life, I can't figure out why my image doesn't accept display: table-footer-group property . This seems to work when I have a div wrapped inside an image, but just the image doesn't work. The problem is that I cannot wrap the image in a div and use the following markup, but the image will be placed below the text. All I am trying to do is place an image below the text, but for me life cannot get this to work. Any ideas?
JS Fiddle with div wrapper: http://jsfiddle.net/kSsAB/4/
JS Fiddle with just an image: http://jsfiddle.net/ro5cprzz/1/
HTML:
<div class="label-below">
<img alt="Some Text" src="http://placehold.it/350x150">
<span> Some Text </span>
</div>
CSS
.label-below{
display: table;
}
img{
display: table-footer-group;
}
span{
display: table-row-group;
}
+3
source to share
1 answer
With the following caveats:
- Without further information on what you are trying to do,
- Why do you have the limitations that you make,
- No matter if your image is a known size and
- How does it need to interact with the parent / rest of the page.
You can accomplish this with absolute / relative positioning: http://jsfiddle.net/v4ek6crn/
Html
<div class="label-below">
<img alt="Some Text" src="http://placehold.it/350x150">
<span> Some Text </span>
</div>
CSS
.label-below{
position: relative;
}
img{
position: absolute;
top: 0;
right 0;
}
span{
position: absolute;
top: 150px;
right 0;
}
0
source to share