Pictures Css diagram - html

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

Related

HTML: multiple images with text under each

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>

Unique Figcaption Changes Image Size in Grid Layout

While testing the desktop version of a template I am creating in Chrome I noticed when my figcaptions are all the same (example: Caption) or similar (example: Caption One... Caption Two) my images and caption line up fine. Once I make them unique the images start to change sizes and nothing lines up correctly. I'm not adding any sort of crazy captions, just simple one or two word descriptions like "Hello World" or "Example Caption". I have ran it through dev tools and looked at a few other posts on stack overflow about issues concerning figcaptions but noting seems to be working. All of my images are the same size. I'm sure it is something simple that I am just overlooking but I would appreciate a new set of eyes at this point. Thanks in advance for your time and assistance.
* {
margin: 0;
padding: 0;
}
.content-section {
display: grid;
grid-template-columns: auto auto auto;
}
figure img {
width: 100%;
height: auto;
}
<!--lines up correctly-->
<section class="content-section">
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
</section>
<!--lines up incorrectly-->
<section class="content-section">
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Some Words</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Hello World</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Something Else</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption Five</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Example</figcaption>
</figure>
</section>

and answering my own question...
.content-section {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Lines up perfect

HTML / CSS Layout - display 2 images vertically in 1 figure

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>

Alternating block and inline behavior with div elements?

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.

Align a Figcaption text which is in Absolute position below an Image which is in a DIV

i'm trying to make a gallery and need some help with align multiple text in the center of the images
HTML:
<div class="gallery">
<figure class="gallery-item">
<a target="_blank" href="./Event/1.jpg">
<img class="thumbnail" src="./Event/1.jpg" width="500" height="281"></a>
<figcaption class="comment"><B>Text</b></figcaption>
</figure>
</div>
CSS:
.comment {
position: absolute;
color: #F04D46;
}
EDIT: Fixed the Typo, still same problem tho.