I would like to use HTML to display multiple images in rows and columns with text under each one.
I can display images in rows and columns, but with no text, like this:
<img src="img1.png">
<img src="img2.png">
This automatically arranges as many images in a row as will fit in the browser window, which is the behavior I want.
I've found various suggestions for placing text under images, but the ones I've tried don't display the images in rows and columns. For example:
<img src="img1.png"> <figcaption> "caption 1" </figcaption>
<img src="img2.png"> <figcaption> "caption 2" </figcaption>
This displays one image per row, instead of next to each other like I want.
As figcaption is a block element so it makes the next element go in the next block.
<div class="image-wrapper">
<img src="img1.png">
<figcaption> "caption 1" </figcaption>
</div>
<div class="image-wrapper">
<img src="img2.png">
<figcaption> "caption 1" </figcaption>
</div>
<div class="image-wrapper">
<img src="img3.png">
<figcaption> "caption 1" </figcaption>
</div>
Here are the CSS properties
<style>
.image-wrapper{
display: inline-block;
text-align: center;
}
</style>
Related
I have 3 images in a raw (using Bootstrap). Under each image there should be a heading, a link and a paragraph of text. All three elements should be centered under the image. As the screen gets smaller, the images go one under another, and those three elements must stay centered under the images. I managed to do this with a heading and a link, it works as needed:
<div class="col-md-4">
<figure>
<img class="img-responsive" src="..." alt="ProjectName">
<figcaption>
<h3 class="text-uppercase">Project Name</h3>
<p>Link to project</p>
</figcaption>
</figure>
</div>
But when I add a paragraph of text like this
<div class="col-md-4">
<figure>
<img class="img-responsive" src="..." alt="ProjectName">
<figcaption>
<h3 class="text-uppercase">Project Name</h3>
<p>Link to project</p>
<p>Some text</p>
</figcaption>
</figure>
</div>
all three elements (heading, link and text) don't stay under the image as the screen gets smaller. Instead, they align in the center of the screen.
Here are my css styles:
figure {
display: inline-block;
}
figure figcaption {
text-align: center;
}
Any ideas how ho fix this?
use text-center utility bootstrap class, then use media query to text-align:left
#media (max-width:640px) {
.text-center {
text-align: left !important/* important only for demo*/
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4">
<figure>
<img class="img-responsive" src="//placehold.it/600" alt="ProjectName">
<figcaption class="text-center">
<h3 class="text-uppercase">Project Name</h3>
<p>Link to project</p>
<p>Some text</p>
</figcaption>
</figure>
</div>
If you are using bootstrap then do like this
if you are using bootstrap then try like this
<div class = "row">
<div class = "col-md-4">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder
thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
</div>
</div>
</div>
This is a follow-up question from this post:
HTML / CSS How do I force images to horizontally display
The code below will display 6 figures. Each figure contains a single image with a caption. The figures are laid out 3 horizontally in 2 vertical groups. Now I want to add an additional image to each of my figures directly below (vertical) the first image. Rest of the layout should remain the same. How do I do that? (I added the extra example image in each figure, but it displays horizontally instead of vertically.)
.group {
white-space: nowrap;
}
.group div {
display: inline-block;
}
<div class="group">
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
<div class="group">
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
Simply put a <br> between the two images, i.e.
<img src="example.jpg"/><br>
<img src="example2.jpg"/>
<figcaption>image</figcaption>
So I have a table that I'm trying to make. Essentially, it will be two rows of three images each, with very short text below each one.
My structure looks like this:
<div class="mission-statement-1">
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
</div>
<div class="mission-statement-2">
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
</div>
I have the two main div elements with display: block with a width of 100%, so that they'd be one under the other. The inner divs are display: inline, so that they would be next to each other, and are given a width of 30%.
If I have just images alone, this works as intended. However, I'm trying to have the text centered underneath each image, and adding text will mess up the intended layout. If I use a block text element, such as a p, then I'll have six rows of one item each. If I stick with the span, then the text comes after the image (as it should given its inline property). I can't seem to make it work the way that I want it to.
Any help?
Try giving your inner divs display: inline-block;.
inline-block elements maintain the support of block styles, such as defined width and height, but can be rendered next to other objects like inline elements.
.mission-statement-1,
.mission-statement-2{
display:block;
}
.iconDiv{
display:inline-block;
text-align:center;
}
img{
background-color:green;
width:100%;
height:100%;
}
<div class="mission-statement-1">
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock">
<figcaption>Some text1</figcaption>
</figure>
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock">
<figcaption>Some text2</figcaption>
</figure>
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock" >
<figcaption>Some text3</figcaption>
</figure>
</div>
<div class="mission-statement-2">
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock" >
<figcaption>Some text4</figcaption>
</figure>
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock">
<figcaption>Some text5</figcaption>
</figure>
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock" >
<figcaption>Some text6</figcaption>
</figure>
</div>
You can Html figure and figcaption tags.
Try using Flex with some CSS. It'll also work as a better way to have a responsive table that's mobile friendly. Also, use the tags Figure and FigCaption which will basically glue the text to the images.
.parent-wrapper {
height:100%;
width:100%;
}
.parent {
display: flex;
flex-wrap: nowrap;
margin:-10px 0 0 -10px;
}
.child {
display: inline-block;
margin:10px 0 0 10px;
flex-grow: 1;
height:150px;
}
<body>
<div class="parent-wrapper">
<div class="parent">
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
</div>
<div class="parent">
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
</div>
</div>
</body>
Here is an example about flex, and breaking point that can set to let content wrap if need. You can inspire yourself from it and dig into flex here
The snippet below uses figure and figcaption, HTML tags dedicated to this kind of content, and flex and flex-wrap for the CSS part.
min or max-width can be used to enhance your styling and set some basic breaking points unless you want also or only use media queries.
.imgcpt {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
figure {
flex: 1 1 30%;
margin: 5px;
border: solid;
min-width: 300px;
text-align: center;
}
figure img {
width: 100%;
max-width: 800px;
}
figcaption>* {
margin: 0.25em
}
<div class="imgcpt">
<figure>
<img src="http://lorempixel.com/200/100/" alt="i show ..." />
<figcaption>
<h1>title</h1>
<p>Or just simple text caption</p>
<p>Or just simple text caption</p>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/201/100/" alt="i show ..." />
<figcaption>
<h1>title</h1>
<p>Or just simple text caption</p>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/202/102/" alt="i show ..." />
<figcaption>
<p>Or just simple text caption</p>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/203/103/" alt="i show ..." />
<figcaption>
<h1>title</h1>
<p>Or just simple text caption</p>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/204/104/" alt="i show ..." />
<figcaption>
<h1>title</h1>
<p>Or just simple text caption</p>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/205/105/" alt="i show ..." />
<figcaption>
<h1>Single title</h1>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/206/106/" alt="i show ..." />
<figcaption>
<h1>title</h1>
<p>Or just simple text caption</p>
</figcaption>
</figure>
</div>
Run snippet in fullpage or play with it and edit it # http://codepen.io/gc-nomade/pen/dvoQyR
Not so much CSS has to be used when using flex.
I want to put the horizontal pictures along line and the names below
<div class="imgages">
<img src="rock.png"/><p>Rock</p>
<img src="paper.png"/><p>Paper</p>
<img src="scissors.png" /><p>Scissors</p>
</div>
TRY - DEMO [EDITED]
For horizontal align pictures use display: inline-block;:
TRY
div.images img {
display: inline-block;
}
Use HTML5 <figure> and <figcaption> Tags for get the names below:
Example:
<!-- Figure with figcaption -->
<figure>
<img src="https://i.stack.imgur.com/lYeVn.png" alt="An awesome picture">
<figcaption><b>NAME:</b> Caption for the awesome picture</figcaption>
</figure>
Result:
NAME: Caption for the awesome picture
For more info:
Mozilla MDN - <figure>
FOR BOTH:
HTML:
<div class="images">
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
<figcaption><b>NAME:</b> Caption picture</figcaption>
</figure>
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
<figcaption><b>NAME:</b> Caption picture</figcaption>
</figure>
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
<figcaption><b>NAME:</b> Caption picture</figcaption>
</figure>
</div>
CSS:
.images figure {
display: inline-block;
}
Technique without the use of float.
Use display:inline-block to align the innnerdivs containing the image in a single line and add the image and text into the inner divs.
DEMO
What should I do in this case:
<figure>
<a href="#" class="portfolio-item">
<div class="picture"><img src="images/portfolio/recent-01.jpg" alt=""/><div class="image-overlay-link"></div></div>
<figcaption class="item-description">
<h5>Mountain Landscapes</h5>
<span>Photography</span>
</figcaption>
</a>
</figure>
I can't use "figcaption" outside "a" element, but I want to make hover both on text area and image. Maybe "article" would be better?
Why not using a outside figure, as suggested by Alohchi? This is valid:
<a href="#" class="portfolio-item">
<figure>
<div class="picture">
<img src="images/portfolio/recent-01.jpg" alt=""/>
<div class="image-overlay-link"></div>
</div>
<figcaption class="item-description">
<h5>Mountain Landscapes</h5>
<span>Photography</span>
</figcaption>
</figure>
</a>
Depending on how your CSS looks, you could contain each of the image and the caption in separate anchor tags, like the following:
<figure>
<div class="picture">
<a href="#" class="portfolio-item">
<img src="images/portfolio/recent-01.jpg" alt=""/>
<div class="image-overlay-link"></div>
</a>
</div>
<figcaption class="item-description">
<a href="#" class="portfolio-item">
<h5>Mountain Landscapes</h5><span>Photography</span>
</a>
</figcaption>
</figure>
Or you could put the picture div container class in the anchor or image tag, that way you wouldn't need the encompassing div.
If you only wanted some hover effect to take place, you could also just use CSS, and target the .picture:hover selector and keep the anchor tag on the figcaption. Depending on what you need.
And to answer your article suggestion, that's for what the W3C calls syndicated content. You might try section, instead, which offers an element that designates a piece of a document you would include in an outline or that are thematically similar––if you are to go that route.