将图片居中并在其下方放置一个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

首先，我假设这符合您的想法。

html

<img src="https://static.tumblr.com/07f1e3ffdfdd03631d00e7792ea3fa93/mja6mxp/AUUna8jev/tumblr_static_tumblr_static_88o50pnpc3k04gw0ck888o80o_640.jpg"/>
<div class="text">Isn't that pretty!</div>

的CSS

body {
  color: #eee;
background-image: url("chrome://global/skin/media/imagedoc-darknoise.png");
}

img {
margin: 0 auto;
display: block;
}

.text {
margin: 0 auto;
display: table;
}

您的第一个问题是，为什么图像比页面大时为什么要调整大小。 我必须指出，在您的CSS中，您将图像设置为可能的宽度和高度的100％，默认情况下，图像将被拉伸以适合元素。

要回答第二个问题，因为包含img位置的“图” div是绝对的，因此它会忽略其他元素的位置。 将位置更改为另一种类型，例如“ position：relative”，它将在考虑其他元素的情况下进行自我定位。

我对html和CSS技能不是最有信心，但我希望我的两分钱至少能帮助您继续前进。

Answer 2

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

另外，使用img在一个div内移动文本块。

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

默认情况下， div具有显示块，因此它将占据整行，并带有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>