How to horizontally align 3 pictures in CSS?-CodePudding

I want 3 pictures aligned horizontally, and I want them all to sit next to one another. When I try to use the code below though, the pictures end up on separate lines. Here's what I've got:

HTML

<section >
   <figures>
      <img scr="....jpg" alt="...">
      <figcaption>...<figcaption>

      <img scr="...jpg" alt="...">
      <figcaption>...<figcaption>

      <img scr="...jpg" alt="...">
      <figcaption>...<figcaption>
   </figures>
</section>

CSS

.features{
    background: white;
    color: burlywood;
    padding: 28px;
    display: flex;
    flex-direction: row;
}

.features figure{
    margin: auto;
    width: 200px;
    text-align: center;
    text-transform: uppercase;
}

.features figure img{
    border-radius: 100px;
    width: 200px;
}

CodePudding user response：

Is <figures> a valid HTML tag? Either way, flex on .features and that's mostly all you need

This will also accept images that aren't perfect square and crop them accordingly

* { box-sizing: border-box } body { font: 16px sans-serif; margin: 0 }

.features {
  background: white;
  color: burlywood;
  display: flex;
  gap: 28px;
  padding: 28px;
}

.features figure {
  flex: 1 0 0%;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

.features figure img {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  width: 100%;
}

<section >
  <figure>
    <img src="https://picsum.photos/250/500?random=1" alt="random image 1">
    <figcaption>First Image<br><small>(250px X 500px)</small></figcaption>
  </figure>

  <figure>
    <img src="https://picsum.photos/500/250?random=2" alt="random image 2">
    <figcaption>Second Image<br><small>(500px X 250px)</small></figcaption>
  </figure>

  <figure>
    <img src="https://picsum.photos/500?random=3" alt="random image 3">
    <figcaption>Third Image<br><small>(500px X 500px)</small></figcaption>
  </figure>
</section>

CodePudding user response：

to see the imgs aligned you should apply flex to figures, not .features :)

CodePudding user response：

I would advise that you put the images and captions in a div element ie:

<figures>
   <div>
      <img 1>
      <figcaptions>...<figcaption>
   </div>

   <div>
      <img 2>
      <figcaptions>...<figcaption>
   </div>

   <div>
      <img 3>
      <figcaptions>...<figcaption>
   </div>
</figures>

figures should have disply: flex; and justify-content: flex-center;

Hope it helps