So recently while making a responsive website, I needed to create a few images that would automatically rearrange with the screen size. So after searching around for few different ways to do this, I found the HTML5 figure tag that made things a lot easier. I used it with the figcaption tag to make the captioning easier as well.
The HTML:
<figure> <img src="created.png" alt="created image" /> <figcaption>Created</figcaption> </figure> <figure> <img src="original.jpg" alt="original image" /> <figcaption>Original</figcaption> </figure> <figure> <img src="altered.jpg" alt="altered image" /> <figcaption>Altered</figcaption> </figure>
The CSS:
figure { display: inline-table; margin: auto; } figcaption { text-align: center; font-weight: bold; }
Advertisements
Categories: General