CODEWITHSUNDEEP
htmlcssimage
qwerty_mc
qwerty_mc

Reputation: 1

how do I make a container with an image and caption

how do I make a container like this? 1

I've tried this button the caption has spaces on the top and down

.container {
border: 2px solid black;
}
.container img {
display: block;
margin-left: auto;
margin-right: auto;
width: 65%;
}
.container div {
width: 100%;
border-bottom: 2px solid black;
padding-bottom: 1px;
}
<div class="container"><img src="https://i.sstatic.net/KTKb6.png"><div></div><p>caption here</p></div>

is there anyway to remove the spaces?

Upvotes: 0

Views: 332

Answers (2)

ahsan
ahsan

Reputation: 1504

Is this what you're looking for?

*{
    box-sizing: border-box;
}
.container{
    width: 50%;
    border: 10px solid black;
    justify-content: center;
    flex-direction: column;
}
.image > img{
    width: 100%;
    vertical-align: middle;
}
.caption{
    display: flex;
    justify-content: center;
    border-top: 10px solid black;
}
<div class="container">
    <div class="image"><img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg" alt=""></div>
    <div class="caption"><h2>CAPTION HERE</h2></div>
</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67778

You can use the <figure> and <figcaption> elements for that in the following way (which , BTW is also the preferrable method from the point of accessibility, since these tags are the standard for image with captions):

.x {
  width: 500px;
  text-align: center;
  border: 1px solid #555;
}

.x img {
  vertical-align: top;
}

.x figcaption {
  border-top: 1px solid #555
}
<figure class="x">
  <img src="https://picsum.photos/300/200" />
  <figcaption>This is the caption</figcaption>
</figure>

(Note: vertical-align: top; on the image prevents any space above/below it)

Upvotes: 1

Related Questions