Html 将标题放在图像的边框内_Html_Css_Border_Caption

Html 将标题放在图像的边框内

html css

Html 将标题放在图像的边框内,html,css,border,caption,Html,Css,Border,Caption,正如你所看到的，我有一个白色的实心边框，边框下面有一个标题。但是，我希望标题位于图片下方，但在边框内，居中。这是我的密码： .img-set { display: block; margin: 0 auto; width: 700px; border: 30px solid white; } .caption{ align-text: center; margin: 0 auto; font-size: 19px; } HTML: Tal抽烟您不能向边框添加任何内容，但是（请注意，我还对您

正如你所看到的，我有一个白色的实心边框，边框下面有一个标题。但是，我希望标题位于图片下方，但在边框内，居中。这是我的密码：

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

HTML:


Tal抽烟

您不能向边框添加任何内容，但是（请注意，我还对您的代码进行了一些有用的更改，使其更符合标准）

解释的解决方案

我已从图像中删除边框。然后我将图像包装在

div

元素（

img容器

）中

我已经将容器的背景色设置为白色，并将填充设置为30像素。通过这种方式，我为图像实现了30像素的视觉边界，它位于容器内

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

在div内部，图像（

img set

）后面还有标题。注意，我添加了

marginbottom:30px添加到图像，使其看起来更好。
修复了您的代码。边框应为其中的所有元素（在本例中为图像和标题）
--
HTML:

（添加间距）是您要做的吗？我已将代码笔URL更新为固定URL。对不起，我弄错了。请投回原票。嘿，艾瑞尔，谢谢。但是为什么figure caption类是空的？为什么要用html将其添加到我的标题中？另外，内联块是什么意思？它和block有什么不同？你好@Nisha Shlaymoon。您可以使用CSS将样式添加到图形标题中，我没有这样做，因为这对于解决方案不是必需的：）。关于内联块，在这里阅读更多关于它的内容——通常，我使用它是因为我希望容器div的宽度与内容（在本例中是图像）一样宽。
.image-container {
  background-color: #ffffff;
  display: inline-block;
  padding: 30px;
}

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

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