Text under Image

[dansignshed]

Hi guys

i am trying to get text under my image, i currently have text as part of the image. Using Html how do i do this? any help? 

link is here https://www.thesignshed.co.uk/collections/custom-signs-36-c for an example

 

[dsonesuk]

Create element to hold text (depending on amount of text a div with child paragraphs,  or just a single paragraph), then create a wrapping element around image and text container  element.

[dansignshed]

11 hours ago, dsonesuk said:

Create element to hold text (depending on amount of text a div with child paragraphs,  or just a single paragraph), then create a wrapping element around image and text container  element.

do you have an example?

[dsonesuk]

	<div>
	<img src="whatever.jpg" alt="whatever">
	<div>
	<p>whatever  whatever  whatever </p>
	</div>
	</div>

New html5 method

https://www.w3schools.com/tags/tag_figcaption.asp

Edited August 9, 2019 by dsonesuk

[shaili_shah]

HTML:

 <div class="item">
    <img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/>
    <p>My Caption here</p>
  </div>

CSS:

.item{
  width:200px;
  text-align:center;
  display:block;
  background-color: transparent;
  border: 1px solid transparent;
  margin-right: 10px;
  margin-bottom: 1px;
  float:left;
}

 

 

[ishan_shah]

Hi,
You can use the <figcaption> tag to fulfill your requirements. For further reference, you can use the following link:
https://www.w3schools.com/tags/tag_figcaption.asp

Edited November 1, 2019 by ishan_shah

[dsonesuk]

I'm sure I've seen that link before, but I can't in the life of me remember where?