将标题放在图像的边框内

Question

如你所见，我有一个白色的实心边框，边框下方有一个标题。 但是，我希望标题位于图片下方，但在边框内，并且居中。 这是我的代码：

.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>

Answer 1

修复了你的代码。 边框应该是所有元素（在这种情况下是图像和标题）

-

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;
}

（添加间距）

Answer 2

您无法向边框添加任何内容，但这是我在CodePen上的解决方案（请注意，我还对您的代码进行了一些有用的更改，以使其更符合标准）。

解决方案解释

我已从图像中删除了边框。 然后我将图像包装在div元素（ img-container ）中。

我已将容器的背景颜色设置为白色，并设置30像素的填充。 这样，我在图像中实现了30像素的视觉边框，该边框位于该容器内。

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

在div内部，在图像（ img-set ）之后，还有标题。 请注意，我添加了margin-bottom: 30px; 到图像，所以它看起来更好。

将标题放在图像的边框内

问题描述

2 个解决方案

解决方案1
3 2016-02-13 00:54:17

解决方案2
0 2016-02-13 00:48:21

将标题放在图像的边框内

问题描述

2 个解决方案

解决方案1 3 2016-02-13 00:54:17

解决方案2 0 2016-02-13 00:48:21

解决方案1
3 2016-02-13 00:54:17

解决方案2
0 2016-02-13 00:48:21