Place caption within border of image

Here is my work so far.

As you can see I have a white solid border and there is a caption underneath the border. However, I want the caption to be under the picture but within the border, and centered. Here is my code:

.img-set {
display: block;
margin: 0 auto;
width: 700px;
border: 30px solid white;
}
.caption{
align-text: center;
margin: 0 auto;
font-size: 19px;
}

HTML:

<div align="center">
  <img  src="https://upload.wikimedia.
org/wikipedia/commons/b/bf/Mikhail_Tal_1982.jpg" class="img-set">
  <div class="caption">
    Tal smoking a cigarette
  </div>
</div>

标签： html css border caption

2条回答

别忘想泡老子

2楼-- · 2019-08-11 09:48

You cannot add any content to the border, but here is my solution on CodePen (note that I also made some useful changes to your code so it complies better to the standards).

The solution explained

I have removed the border from the image. I then wrapped the image in a div element (img-container).

I've set the container's background color to white, and set padding of 30 pixels. This way I achieved a visual border of 30 pixels for the image, which is inside that container.

.image-container {
  background-color: #ffffff;
  display: inline-block;
  padding: 30px;
}

Inside the div, after the image (img-set), there is also the caption. Note that I added margin-bottom: 30px; to the image, so it looks better.

0人赞添加讨论(0) 举报

贼婆χ

3楼-- · 2019-08-11 10:04

Fixed your code. The border should be for all the elements within (in this case the image and caption)

HTML:

  <head>
  </head>

  <body>
    <h1 align="center">Mikhael Tal</h1>
    <h5 align="center">The magician from Riga</h5>
    <figure class="img-set">
        <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Mikhail_Tal_1982.jpg">
        <figcaption align="center">Mikhael Tal smoking a cigarette</figcaption>
     </figure>
  </body>


  </html>

CSS:

h1 {
  font-size: 100px;
  font-family: italic;
}

h5 {
  font-size: 45px;
  font-family: italic;
  font-style: italic;
}

body {
  background-color: lightblue;
}

.img-set {
  border: 30px solid white;
  width: 700px;

  margin: 0 auto;
}

.img-set img {
  display: block;
  width: 100%;
}

figcaption{
  background-color: #FFF;
  padding-top: 30px;
}

(spacing added)

0人赞添加讨论(0) 举报

Place caption within border of image

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间