How to add text to the same <figure> under the image?-CodePudding

So, here is my code, but problem is that text is right to the image, but not under the image. How to add it correctly?

figure { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  text-align: justify;
}

figure img {
  border: 1px solid #000;
  box-shadow: 4px 4px 12px 0px  rgba(0,0,0,0.6);
  max-width: 100%;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Web</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <figure>
            <img src="img/books/2019/Rhonda Byrne - Paslaptis.jpg" alt="Rhonda Byrne - Paslaptis"/>
            <figcaption>Rhonda Byrne - Paslaptis</figcaption>
        </figure>
    </body>
</html>

CodePudding user response：

You don't have to come up with the grid system to do that. Here is a simple varainte that does what you want.

figure { 
  grid-gap: 20px;
  align-items: stretch;
  text-align: justify;
}

figure img {
  border: 1px solid #000;
  box-shadow: 4px 4px 12px 0px  rgba(0,0,0,0.6);
  max-width: 100%;
}
.figcaption {
    display: block;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Web</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <figure >
            <img src="http://via.placeholder.com/640x360" alt="Rhonda Byrne - Paslaptis"/>
            <figcaption>Rhonda Byrne - Paslaptis</figcaption>
        </figure>
    </body>
</html

CodePudding user response：

You can simply remove the display: grid; from the figure's css. Just like this:

 figure {
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     grid-gap: 20px;
     align-items: stretch;
     text-align: justify;
 }

CodePudding user response：

Making the figure display flex will do it.

Here's a simple example.

figure {
display: flex;
flex-flow: column;
}
figure img {
  border: 1px solid #000;
  box-shadow: 4px 4px 12px 0px  rgba(0,0,0,0.6);
  max-width: 100%;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Web</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <figure>
            <img src="https://picsum.photos/id/1016/300/300" alt="A view"/>
            <figcaption>Rhonda Byrne - Paslaptis</figcaption>
        </figure>
    </body>
</html>

CodePudding user response：

body { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  text-align: justify;
 }
figure > img {
  display: block;
  margin-bottom: 4px;
  border: 1px solid #000;
  box-shadow: 4px 4px 12px 0px  rgba(0,0,0,0.6);
  max-width: 100%;
}
figcaption {
  width: auto;
  text-align: center;
  margin: 5px auto;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Web</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <figure>
            <img src="http://via.placeholder.com/640x360" alt="Rhonda Byrne - Paslaptis"/>
            <figcaption>Rhonda Byrne - Paslaptis</figcaption>
        </figure>
    </body>
</html>