I have a footer and am wanting it to be 100% in width using the 960 grid system, all is fine I can it to work within a div tag using an id. but the grid floats all the way to the left of the page while the whole site using the grid is centered on the page. I have tried prefix_2 to give a push over to the right but it doesn't line up correctly.
Here is my code to start with.
<div id="footer" class="container_12"><img class="prefix_6" id="abs" align="right" src="#img" width="500" height="258" />
<br /><br />
<div class="grid_2"><p>Home</p><p>Services</p><p>Plans</p></div>
<div class="grid_2"><p>Pricing</p><p>Design</p><p>Logos</p></div>
<div class="grid_2 suffix_6"><p>Call Tool Free:</p><p>1-800-495-5933</p><p>Contact Us</p></div>
<div class="grid_6"><img src="#img" width="16" height="16" />Follow me on Twitter <img src="#img" width="16" height="16" />Become a Fan on Facebook</div>
</div>
css:
#footer {
background-color: #f0e9d8;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #6e2500;
font-weight: bold;
height: 250px;
}
#abs {
position: absolute;
clip: rect(auto,auto,500px,auto);
}
If I understand you correctly, you want that footer would be 100% width? That's a easy fix.
You just need an another wrapper around your footer code. I would do it like this:
<div id="footer">
<div class="container_12">
<img class="prefix_6" id="abs" align="right" src="#img" width="500" height="258" />
<br /><br />
<div class="grid_2"><p>Home</p><p>Services</p><p>Plans</p></div>
<div class="grid_2"><p>Pricing</p><p>Design</p><p>Logos</p></div>
<div class="grid_2 suffix_6"><p>Call Tool Free:</p><p>1-800-495-5933</p><p>Contact Us</p></div>
<div class="grid_6"><img src="#img" width="16" height="16" />Follow me on Twitter <img src="#img" width="16" height="16" />Become a Fan on Facebook</div>
</div>
</div>
And the css for that would be:
#footer {
background-color: #f0e9d8;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #6e2500;
font-weight: bold;
height: 250px;
width: 100%;
position: relative;
}
#abs {
position: absolute;
clip: rect(auto,auto,500px,auto);
}
If you want the footer's width to be 100% just remove it from the 960 Grid System.
<html>
<body>
<header>
Header
</header>
<section class="container_12">
<!--960 grid-->
</section>
<footer class="footer-main">
<!--img-->
</footer>
</body>
</html>
css
.footer-main {
width:100%;
}
Related
I am trying to done is have a responsive div with 2 pictures centered, one in each div.
What I am want it is to drop down, when the screen is small and not big enought to display them side by side.
At the moment with the below when the screen is smaller it pushes the images into each other.
<style>
.container{width:100%}
.inner_container{float:left;width:50%;}
.img_container{width:250px;margin:0 auto:padding-bottom:5px;}
</style>
<div class="container">
<div class="inner_container">
<div class="img_container">
<img src="left_img.png" width="250" height="70" alt="" border="0">
</div>
</div>
<div class="inner_container">
<div class="img_container">
<img src="right_img.png" width="250" height="70" alt="" border="0">
</div>
</div>
</div>
You're using the wrong styles to do what you're trying to do. Mainly, you've set a fixed width of 250px to your img_container div which is why the images aren't getting scaled down. This the correct way to achieve what you want:
.container {
width: 100%
}
.inner_container {
width: 49%;
display: inline-block;
}
.img_container {
width: 100%;
}
.img_container a img {
width: 100%;
}
<div class="container">
<div class="inner_container">
<div class="img_container">
<a href="http://www.google.co.uk">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</a>
</div>
</div>
<div class="inner_container">
<div class="img_container">
<a href="http://www.google.com">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</a>
</div>
</div>
</div>
With the above code, the images keep on getting scaled down and stay on the same line until the window size is reduced to very small. If you would want them to appear on two separate lines after a particular width, you will need to use media-queries like this:
.container{width:100%}
.inner_container { width: 49%; display: inline-block; }
.img_container { width: 100%; }
.img_container a img { width: 100%; }
#media (max-width: 650px) {
.inner_container { width: 100%; display: block; }
}
<div class="container">
<div class="inner_container">
<div class="img_container">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</div>
</div>
<div class="inner_container">
<div class="img_container">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</div>
</div>
</div>
Set a min-width on the .inner_container
.container {
width:100%;
overflow: hidden;
}
.inner_container {
float:left;
width:50%;
min-width: 250px;
}
.img_container {
width:250px;
margin:0 auto;
padding-bottom:5px;
text-align: center;
}
http://jsfiddle.net/63pnotjc/
When I posted my reply, I didn't notice Fahad, Show code snippet link.
Thank you both for your help, this is the css code I went with in the end.
.container{width:100%;overflow:hidden;}
.inner_container{display:inline-block;width:49%;}
.img_container{width:250px;margin:0 auto;text-align:center;padding-bottom:5px;}
#media (max-width:501px){
.inner_container{display:block;width:100%;}
}
Once again thank you both for your help :)
I have a position:fixed footer on my page so that it scrolls with the page. Inside that footer I have a set of five images. The problem is that the images all hang off the bottom of the footer so the bottoms are not visible. No margin or padding values have moved them to the appropriate place on screen. Is there a css command I am missing or is their something weird with the footer?
This is the css for the footer and images within it. Thanks for any help.
.footer {
background-color: rgba(0, 0, 0, 0.5);
height: 100px;
font-size:20px;
color:black;
font-family:Verdana;
padding-left: 8px;
width: 100%;
position:fixed; left:0px; bottom:100px;
}
.footer img{
width: 59px;
height: 90px;
float: right;
display:inline;
padding: 1px;
margin-right: 50px;
}
<body>
<div class="container">
<div class="header"></div>
<div class="content">
<div class="leftSidebar">
<div align="center">
<h3>Quick Stats</h3>
</div>
<p>Title: Exposure</p>
<p>Author: Kathy/Brendan Reichs</p>
<p>Series: Virals</p>
<p>Length: 436 pages</p>
<p>Publication Date: March 6, 2014 </p>
<p align="center"><img src="../Images/Barnes-and-Noble.png" width="180" height="120" /><img src="../Images/amazon.png" width="180" height="98.18" style="z-index: -1;" /></p>
</div>
<div class="rightSidebar">
<div align="center">
<h3>Kathy Reichs</h3>
</div>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br></p>
</div>
<div class="middleBar">
<div class="bookTitle" align="center">
<h1>Virals: Exposure</h1>
<h2 style="font-size:24px;">Kathy and Brendan Reichs</h2>
</div>
<div align="center"><img name="" src="../Exposure.jpg" width="315" height="456" alt="" /></div>
</div>
</div>
<div class="footer">
<div class="relatedBooks">
<p>Related Books: ssssss </p>
</div>
<div class="footerImages">
<img src="../Images/Swipe.jpg" width="1000" height="1500" />
<img src="../Images/Code.jpg" width="59" height="90" />
<img src="../Images/Shift.jpg" width="1000" height="1500" />
<img src="../Images/Seizure.jpg" width="327" height="500" />
<img src="../Images/Virals.jpg" width="327" height="500" />
</div>
</div>
</div>
</body>
Just delete the "height: 100px;". It will be set to auto then, and if you want some more space around the images then use something like "padding: 24px 0;" to space it out a bit. There's no reason to declare the height of the footer. It will auto-grow to the size of your images. I imagine that's why they're floating off.
the first problem is that there is a gap between my banner and my nav bar even though I don't have anything seperating them
the next problem I have is that my nav bar should extend blue until the end of the page (or 970px in my case )but instead it only has blue for each li element
and thirdly the div tags don't seem to be doing their job right since when I expand my page I get the next div tag moving up to the right of this one.
my css code
#button {
padding: 3px;
}
#button li {
display: inline;
}
#button li a {
font-family: Arial;
font-size:14px;
text-decoration: none;
float:left;
padding: 10px;
background-color: #4169E1;
color: #fff;
}
#button li a:hover {
background-color: #E30800;
margin-top:-2px;
padding-bottom:12px;
}
and here is my html
<body leftmargin="50px" rightmargin="50px">
<img src="banner.jpg" width="970" height="120" />
<div>
<ul id="button">
<li>Home</li>
<li>Contact </li>
<li>Resumé</li>
<li>Help</li>
</ul>
</div>
<div>
<table width="970" cellpadding="5px">
<tr height="270">
<td width="700"><div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider"> <img src="demo/images/nemo.jpg" alt="" /> <img src="demo/images/up.jpg" alt="" title="#htmlcaption" /> <img src="demo/images/toystory.jpg" alt="" title="This is an example of a caption" /> <img src="demo/images/walle.jpg" alt="" /> </div>
</div>
<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with a link. </div></td>
<td width = "270"><img src="demo/images/nahum-pachenik.jpg"></td>
</tr>
<table>
</div>
<hr color="#4169E1"/>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
jsFiddle: http://jsfiddle.net/Hjc2e/
html,ul{
/*clear any default margin or padding, research css reset*/
/*this is how you get the <ul> to line up flush with your image*/
margin:0;
padding:0;
}
body{
/*width 100% for content and you can control you width with the left and right margins of body*/
margin-left:50px;
margin-right:50px;
}
#button li {
background-color: #4169E1;
float:left;
list-style-type:none;
text-align:center;
/*Must calculate width of menu based on width of list items in menu, 4 items thus 25%*/
width:25%;
height:40px;
/* so that text lines up vertically center padding-top is always half the height*/
padding-top:20px;
}
#button li a {
font-family: Arial;
font-size:14px;
text-decoration: none;
color: #fff;
}
#button li a:hover {
background-color: #E30800;
margin-top:-2px;
padding-bottom:5px;
}
<!--no need for div wrapper and it was adding gap between banner image and menu-->
<ul id="button">
<li>Home</li>
<li>Contact </li>
<li>Resumé</li>
<li>Help</li>
</ul>
<div>
<table width="970" cellpadding="5px">
<tr height="270">
<td width="700"><div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider"> <img src="demo/images/nemo.jpg" alt="" /> <img src="demo/images/up.jpg" alt="" title="#htmlcaption" /> <img src="demo/images/toystory.jpg" alt="" title="This is an example of a caption" /> <img src="demo/images/walle.jpg" alt="" /> </div>
</div>
<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with a link. </div></td>
<td width = "270"><img src="demo/images/nahum-pachenik.jpg"></td>
</tr>
<table>
</div>
<hr color="#4169E1"/>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
After researching for hours I still can't get it to work.
I want to add a color or a texturey image to my site's background, but it stays white.
The relevant CSS is:
#html {
min-height: 100%;
}
#body {
min-height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
font-family: "Lucida Console", Monaco, monospace;
}
And the HTML. Its kinda messy because I'm a noob.:
<body>
<div id="ribbon">
<div id="container" style="height: 100%;">
<div id="social_and_music">
<div id="audioplayer">
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div id="social">
<img src="images/facebook.png" width="32" height="32" />
<img src="images/twitter.png" width="32" height="32" />
<img src="images/lastfm.png" width="32" height="32" />
<img src="images/myspace.png" width="32" height="32" />
</div>
</div>
<div id="header"></div>
<div class="nav" id="nav1">HOME</div>
<div class="nav" id="nav2">MUSIC</div>
<div class="nav" id="nav3">SHOWS</div>
<div class="nav" id="nav4">CONTACT</div>
<div id="main_content">
<div id="main_img"></div>
<div id="second_image">
<div class="widget_iframe" style="display:inline-block;width:100%;height:200px;margin:0;padding:0;border:0;">
<iframe class="widget_iframe" src="http://www.reverbnation.com/widget_code/html_widget/artist_3258446?widget_id=52&posted_by=artist_3258446&pwc[design]=default&pwc[background_color]=%23333333&pwc[layout]=compact&pwc[show_map]=0&pwc[size]=fit" width="100%" height="100%" frameborder="0" scrolling="no">SHOWS</iframe>
</center>
</div>
</div>
</div>
</div>
<div id="leftbox">
<div id="imgA" class="img"></div>
<div id="imgB" class="img"></div>
<div id="imgC" class="img"></div>
<div id="imgD" class="img"></div>
</div>
<div id="rightbox">right</div>
<div id="footer">Content for footer goes here</div>
<div id="bottom">STEREO WARFARE COPYRIGHT 2011 ARIEL MEHRBAN</div>
</div>
</div>
</div>
<div id="push"></div>
</body>
i think your css should be:
html {
min-height: 100%;
}
body {
min-height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
font-family: "Lucida Console", Monaco, monospace;
}
and on the html page you should have like this:
<html>
<body>
<!-- ... -->
</body>
</html>
when you put a # it means u are using a id like
css:
#text{
background-color:#aaa;
}
html:
<html>
<body>
<input type="text" id="text"/>
</body>
</html>
Try to add the image in body tag, this should work fine in any browser.
<!DOCTYPE html>
<html>
<head>
</head>
<body background="imagename.jpg">
<p>some text</p>
</body>
</html>
I am using my html and css code for the background color like these .
HTML
<div class="wrapper">
CSS
wrapper {
width: 900px;
height: 800px;
background-color: #ffffff;
margin: 0 auto;
}
I have two images that need to kept inline; I want to write a caption under each image.
<center>
<a href="http://example.com/hello">
<img src="hello.png" width="100px" height="100px">
</a>
<a href="http://example.com/hi">
<img src="hi.png" width="100px" height="100px">
</a>
</center>
How can I implement?
Figure and Figcaption tags:
<figure>
<img src='image.jpg' alt='missing' />
<figcaption>Caption goes here</figcaption>
</figure>
Gotta love HTML5.
See sample
#container {
text-align: center;
}
a, figure {
display: inline-block;
}
figcaption {
margin: 10px 0 0 0;
font-variant: small-caps;
font-family: Arial;
font-weight: bold;
color: #bb3333;
}
figure {
padding: 5px;
}
img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
img {
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
}
<div id="container">
<a href="#">
<figure>
<img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
<figcaption>First image</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
<figcaption>Second image</figcaption>
</figure>
</a>
</div>
CSS
#images{
text-align:center;
margin:50px auto;
}
#images a{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;
}
HTML
<div id="images">
<a href="http://xyz.com/hello">
<img src="hello.png" width="100px" height="100px">
<div class="caption">Caption 1</div>
</a>
<a href="http://xyz.com/hi">
<img src="hi.png" width="100px" height="100px">
<div class="caption">Caption 2</div>
</a>
</div>
A fiddle is here.
For responsive images. You can add the picture and source tags within the figure tag.
<figure>
<picture>
<source media="(min-width: 750px)" srcset="images/image_2x.jpg"/>
<source media="(min-width: 500px)" srcset="images/image.jpg" />
<img src="images.jpg" alt="An image">
</picture>
<figcaption>Caption goes here</figcaption>
</figure>
Put the image — let's say it's width is 140px — inside of a link:
<a><img src='image link' style='width: 140px'></a>
Next, put the caption in a and give it a width less than your image, while centering it:
<a>
<img src='image link' style='width: 140px'>
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
Next, in the link tag, style the link so that it no longer looks like a link. You can give it any color you want, but just remove any text decoration your links may carry.
<a style='text-decoration: none; color: orange;'>
<img src='image link' style='width: 140px'>
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
I wrapped the image with it's caption in a link so that no text could push the caption out of the way: The caption is tied to the picture by the link. Here's an example: http://www.alphaeducational.com/p/okay.html
<div style="margin: 0 auto; text-align: center; overflow: hidden;">
<div style="float: left;">
<img src="hello.png" width="100px" height="100px">
caption 1
</div>
<div style="float: left;">
<img src="hi.png" width="100px" height="100px">
caption 2
</div>
</div>
CSS is your friend; there is no need for the center tag (not to mention it is quite depreciated) nor the excessive non-breaking spaces. Here is a simple example:
CSS
.images {
text-align:center;
}
.images img {
width:100px;
height:100px;
}
.images div {
width:100px;
text-align:center;
}
.images div span {
display:block;
}
.margin_right {
margin-right:50px;
}
.float {
float:left;
}
.clear {
clear:both;
height:0;
width:0;
}
HTML
<div class="images">
<div class="float margin_right">
<img src="hello.png" width="100px" height="100px" />
<span>This is some text</span>
</div>
<div class="float">
<img src="hi.png" width="100px" height="100px" />
<span>And some more text</span>
</div>
<span class="clear"></span>
</div>
To be more semantically correct and answer the OPs orginal question about aligning them side by side I would use this:
HTML
<div class="items">
<figure>
<img src="hello.png" width="100px" height="100px">
<figcaption>Caption 1</figcaption>
</figure>
<figure>
<img src="hi.png" width="100px" height="100px">
<figcaption>Caption 2</figcaption>
</figure></div>
CSS
.items{
text-align:center;
margin:50px auto;}
.items figure{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;}
https://jsfiddle.net/c7borg/jLzc6h72/3/
The <figcaption> tag in HTML5 allows you to enter text to your image for example:
<figcaption>
Your text here
</figcaption>.
You can then use CSS to position the text where it should be on the image.
<table>
<tr><td><img ...><td><img ...>
<tr><td>caption1<td>caption2
</table>
Style as desired.