This question already has answers here:
How to write a caption under an image?
(9 answers)
Closed 6 years ago.
I need to add captions under each image. I tried using the tag and also used the tag but Im not able to get the desired result
<a href="http://www.sportshub.com.sg/Venues/Pages/OCBC-Aquatic-Centre/aqua-classes.aspx">
<img style=" float:left; display:inline; border-radius:50%;" src="d2.jpg" width="350" height="200" alt="bbc news special" hspace="30"/>
</a>
<a href="http://www.sportshub.com.sg/community/Pages/ecorider/ecorider.aspx">
<img style=" float:left; display:inline; border-radius:50%;" src="d3.jpg" width="350" height="200" alt="bbc news special" hspace="30"/>
</a>strong text
like this? run code
.text {position:relative;text-align:center;}
.images{display:inline-block;margin-top:10px;}
<div class="images">
<a href="http://www.sportshub.com.sg/Venues/Pages/OCBC-Aquatic-Centre/aqua-classes.aspx">
<img style=" float:left; display:inline; border-radius:50%;" src="d2.jpg" width="350" height="200" alt="bbc news special" hspace=""/>
</a>
<div class="text">
Strong Text
</div>
</div>
<div class="images">
<a href="http://www.sportshub.com.sg/Venues/Pages/OCBC-Aquatic-Centre/aqua-classes.aspx">
<img style=" float:left; display:inline; border-radius:50%;" src="d2.jpg" width="350" height="200" alt="bbc news special" hspace=""/>
</a>
<div class="text">
Strong Text
</div>
</div>
Hope it will help you
HTML
<div>
<img src='image1.jpg' alt='image1' />
<span class="caption">Caption goes here</span>
</div>
CSS
.caption {
display: block;
font-weight: bold;
margin-top: 10px;
}
Live Demo
Related
Hey I'm trying to get a website for a server I'm hosting and I'm trying to bring the bottom two images up into the open area above them.
Can anyone help me out I can't wrap my head around this, i'm also new to stack overflow so I'm not as fast as some people I'm sorry, it also won't let me post because there was too much code so I took out the css.
So Here is a "JSFiddle" link to the code:
https://jsfiddle.net/4hy7q2ou/2/
<body>
<div class="card1 one" style="margin-top: 40px;">
<img src="css/images/10.png" width="480" height="270"/>
</div>
<div class="card1 two" style="margin-top: 60px;">
<img src="css/images/4.png" width="480" height="270"/>
</div>
<div class="card2 one">
<h2>
Our Server.
</h2>
<p>
</p>
<p>
</p>
</div>
<div class="card3 two">
<h2>
Our Staff Team.
</h2>
<h3>
Owners:
</h3>
<dl>
Inc0gnitoON
IgnitionON
</dl>
<h3>
Admins:
</h3>
<dl>
N/A
</dl>
<h3>
Moderators:
</h3>
<dl>
WitherVoid_
</dl>
</div>
</body>
<body>
<div class="card1 three" style="margin-bottom: 5px;">
<img src="css/images/7.png" width="480" height="270"/>
</div>
<div class="card1 four">
<img src="css/images/9.png" width="480" height="270"/>
</div>
</body>
You should just align all the images into a square, this is good for cleaner and minimal code:
CSS:
img {
width:20%;
display:inline-table;
margin:5px;
}
I just did "img" but you can actually make this a class e.g. ".card"
HTML:
<div>
<img src="https://via.placeholder.com/350x150" />
<img src="https://via.placeholder.com/350x150" />
<br>
<img src="https://via.placeholder.com/350x150" />
<img src="https://via.placeholder.com/350x150" />
</div>
Output:
This link could also help you achieve this, if my post doesn't help or if you don't quite understand.
EDIT: This should align two images, may need to mess around with the numbers in the CSS to get it to fit better:
CSS:
.block {
width:20%;
display:inline-table;
margin:5px;
}
.side {
display:inline;
margin-left: 50%;
margin-top: -20%;
}
.second {
display:inline;
margin-left: 50%;
margin-top: -1%;
}
HTML:
<div>
<img src="https://via.placeholder.com/350x150" class="block"/>
<img src="https://via.placeholder.com/350x150" class="block"/>
<br>
<img src="https://via.placeholder.com/350x150" class="block"/>
<img src="https://via.placeholder.com/350x150" class="block"/>
</div>
<div>
<img src="https://via.placeholder.com/150x300" class="side"/>
<img src="https://via.placeholder.com/150x300" class="second"/>
</div>
I would like to know how to edit this code to show these pictures centered side by side with each download button centered and underneath each picture, If anybody knows how to edit the code to this, it would be appreciated. Thanks.
The website link that I uploaded the code to, to test it can be seen below:
http://www.tekmillion.com/albums.html
.clearfix {
clear: both;
}
.divWithBtn {
float: left;
text-align: center;
padding: 10px;
}
.divWithBtn img,
.divWithBtn a{
display: block;
margin: 0 auto;
}
<HR>
<div class="container">
</br>
<span class="textformat1"><center><b>Albums</b></span></center>
</br>
<center>
<div class="clear">
<div class="divWithBtn">
<img src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover" width="200" height="200">
<a href="LONDON%202%20TURKEY%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT %20COVER)" width="200" height="200" border:none;>
<a href="LONDON%202%20TURKEY%20VOL.2.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front %20Cover)" width="200" height="200">
<a href="LOVE%20%26%20HATE%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)" width="200" height="200">
<a href="GURBET%20ELI%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
</div>
</center>
</br>
Add following css to your code:
This css will make image side by side.
.divWithBtn {
display: inline-block;
}
Following css will make download button below the image.
.divWithBtn > a {
display: block;
}
Hope it helps.
Note: And your current css which you post here is not applied. Make sure it is applied to your html element. Check path for your css file.
add class "display_table" to outer div.
<div class="clear" class="display_table">
add styles for the class "divWithBtn"
.divWithBtn {
float:left;
text-align:center;
margin: 0px 20px;
}
And finally add div to the image tag
<div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>
Finall output
<div class="clear" class="display_table">
<div class="divWithBtn">
<div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div> <img height="200" width="200" src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT %20COVER)" border:none;=""></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div><img height="200" width="200" src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front %20Cover)"></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div><img height="200" width="200" src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)">
<div> <img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
</div>
</div>
</div>
Css
.display_table { display: table; }
.divWithBtn { float: left; text-align: center; margin: 0px 20px; }
I have a few wrapped images in my HTML file:
<div id="banners">
<div id="friend">
<a target="_blank" href="http://www.google.com">
<img src="../assets/images/friends/friend_1_256.png" alt="TEST 1" width="200" height="200">
</a>
</div>
<div id="friend">
<a target="_blank" href="https://www.google.com">
<img src="../assets/images/friends/friend_2_512x157.png" alt="TEST 2" width="400" height="123">
</a>
</div>
</div>
I want to display these images in a row. I have tried solutions such as float: left or display: inline-block but none of them works. Is it possible to display wrapped images inline?
It should work. Try something like this.
#friend {
display: inline-block;
border: 1px solid red; /*Just to highlight */
width:200px; /*Set width according to parent id banners*/
text-align:center /*center image*/
}
<div id="banners">
<div id="friend">
<a target="_blank" href="http://www.google.com">
<img src="https://i.stack.imgur.com/kMcaV.jpg?s=328&g=1" alt="TEST 1" width="200" height="200">
</a>
</div>
<div id="friend">
<a target="_blank" href="https://www.google.com">
<img src="https://i.stack.imgur.com/kMcaV.jpg?s=328&g=1" alt="TEST 2" width="400" height="123">
</a>
</div>
</div>
Try this out, it worked for me, hope it will resolve your issue as well
#friend{display:table-cell;}
I have a trouble making website. I can't make 3 photos align in one line.
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
float: left is used
div is inherently display:block
you need to use something like a span which has display:inline-block
https://jsfiddle.net/7daffjh8/2/
See this fiddle
Change the display property of div to inline-block instead of block
Add the below given to your CSS
div{
display:inline-block;
}
Try this
add float:left on div
div {
float:left
}
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
I hope this would help.
See the Example on Fiddle
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style>
div.container {
display:inline-block;
}
</style>
</head>
<body>
<div class="container">
<img src="http://placehold.it/300x180" height="300" width="180" />
</div>
<div class="container">
<img src="http://placehold.it/300x180"/ height="300" width="180" />
</div>
<div class="container">
<img src="http://placehold.it/300x180" height="300" width="180" />
</div>
</div>
</body>
</html>
Try this:
You had used multiple . After closing of next tag content always displayed in next line.
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
<img src="Images/cilipica.jpg" width="300px" height="180px">
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
you have to make the divs display inline. under CSS
div{
display:inline;
}
or
<div style="display:inline;">
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div style="display:inline;">
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div style="display:inline;">
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
div.minihalf-width{
width:30%;
float:left
}
div.minihalf-width img{
width: 100%;
}
<section>
<div class="minihalf-width">
<img src="latest-work/work-1.png" alt="">
</div>
<div class="minihalf-width">
<img src="latest-work/work-2.jpg" alt="">
</div>
<div class="minihalf-width">
<img src="latest-work/work-3.jpg" alt="">
</div>
</section>
Basically I have put a gallery into the website that I am making, and it works well. But. The pictures just scroll down the left side of the screen. I would like half of the pictures to be to the right of the other pictures... Here is a screenshot of my website (With Hi-tech red boxes drawn in paint to show where I would like half of the pictures to go)
http://tinypic.com/view.php?pic=hx3fbb&s=8#.U2JPKYFdX-k
Here is my code....(html)
<div class="img">
<a target="_blank" href="Gallery/Ss1.jpg">
<img src="Gallery/Ss1.jpg" alt="Screenshot1" width="500" height="400">
</a>
<div class="desc">Death vs Colossus</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/Ss2.jpg">
<img src="Gallery/Ss2.jpg" alt="Screenshot2" width="500" height="400">
</a>
<div class="desc">Death's forge</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/Ss3.jpg">
<img src="Gallery/Ss3.jpg" alt="Screenshot3" width="500" height="400">
</a>
<div class="desc">Death vs Horseman</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/Ss4.jpg">
<img src="Gallery/Ss4.jpg" alt="FanArt1" width="500" height="400">
</a>
<div class="desc">Horse Jump</div>
</div>
<p></p>
<div class="img">
<a target="_blank" href="Gallery/fa1.jpg">
<img src="Gallery/fa1.jpg" alt="FanArt1" width="500" height="400">
</a>
<div class="desc">Fan Art #1</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/fa2.jpg">
<img src="Gallery/fa2.jpg" alt="FanArt2" width="500" height="400">
</a>
<div class="desc">Fan Art #2</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/fa3.jpg">
<img src="Gallery/fa3.jpg" alt="FanArt3" width="500" height="400">
</a>
<div class="desc">Fan Art #3</div>
</div>
<div class="img1">
<a target="_blank" href="Gallery/fa4.jpg">
<img src="Gallery/fa4.jpg" alt="FanArt4" width="500" height="400">
</a>
<div class="desc">Fan Art #4</div>
</div>
and here is my CSS code;
div.img
{
margin:5px;
padding: 5px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:5px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:5px;
}
So again, I would basically like the Fan art pictures to appear to the right of the Screenshot pictures. I tried making a new div class for the fan art and changing the float to 'right' but that didn't work.
Thankyou in advance for your time and input :)
There are a couple different methods you could use for this. You could use floats or display: inline-block.
http://jsfiddle.net/Davidicus/p4Qkh/
Here is a simple float example.
I have a pen where i am using "inline-block" to float elements. Click on the little eye icon in the css panel to see the compiled css.
http://codepen.io/davidicus/pen/vxIra