html - 将图像居中并在其下方放置一个 div

Question

我有两个问题。本质上，我想以其原始大小显示图像并将其放置在屏幕中间(中间我的意思是在“水平”中间而不是屏幕的中心)，然后在其正下方放置一个带有文本的 div图像。这是我使用的代码:

<div class="figure">;
<img src="...">;
</div>';
<div class="text">
text here
</div>

这是CSS:

.figure{
position:absolute;
margin:0 auto;
left:0;
right:0;
bottom:10px;
top:30px;
}

.figure img{
    margin-left: auto;
    margin-right: auto;
    display: block;
    height:100%;
    width:100%；
}

我有两个问题。第一个是当图像高度理论上长于屏幕高度时，没有垂直滚动条，图像只是调整大小以适应屏幕。第二个问题是在不知道图片大小的情况下如何将文字放在图片下方？我试过 figcaption 但它不起作用。

Answer 1

要使其完美居中，您可能需要 min-height: 100vh; 和 min-width: 100vw; 然后使用 display flex 使其居中。否则，您可能无法将其垂直居中。

此外，将您的文本 block 移动到带有 img 的一个 div 中。

默认情况下，除非您指定，否则 img 不会调整大小。

默认 div 有显示 block ，所以它会占据整行，使用 text-align: center; 它只会让你的文本居中。

.figure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-width: 100vw;
}

.centered {
  text-align: center;
}

html,
body {
  padding: 0;
  margin: 0;
}

<div class="figure">
  <div>
    <img src="http://placehold.it/950x450">
    <div class="centered">
      text here
    </div>
  </div>
</div>