how to align images horizontally? - html

Question

I tried used display: inline-block and other stuff like changing the width but my images only show to be vertical.
.figure {
display: inline-block;
}
figure.item {
color: #676767;
background-color: #ffffff;
width: 100%;
margin: 0;
text-align: center;
display: inline-block;
}
.item img {
width: 100px;
height: 100px;
display: inline-block;
}
.caption {
display: block;
}
<figure class="item">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
<img src="./img/insta.png" />
<figcaption class="caption">Facebook</figcaption>
<img src="./img/telefone.png" />
<figcaption class="caption">Facebook</figcaption>
<img src="./img/email.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
Right now the images are showing vertically and with text under. And i need the images to be horizontally with text under they.

Answer 1

Using Flex-box
I make a wrap div for every img and text.
.item {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 0;
}
.item img {
width: 100px;
height: 100px;
display: inline-block;
}
.caption {
display: inline-block;
}
.wrap{
width:100px;
text-align: center;
}
<figure class="item">
<div class="wrap">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</div>
<div class="wrap">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</div>
<div class="wrap">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</div>
<div class="wrap">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</div>
</figure>

Answer 2

figure.item {
color: #676767;
background-color: #ffffff;
text-align: center;
}
.item img {
width: 100px;
height: 100px;
}
figure {
width: 25%;
float: left;
margin: 0;
text-align: center;
padding: 0;
}
<figure class="item">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure class="item">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure class="item">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure class="item">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>

Answer 3

There are several issues with your snippet:
The first line .figure is not meant to be a class but a element selector (i.e. .figure !== figure)
Block-Elements will be displayed underneath each other by default.
Try to use flex-box. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.row {
display: flex;
}
<div class="row">
<figure>
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure>
<img src="./img/insta.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure>
<img src="./img/telefone.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure>
<img src="./img/email.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
</div>