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位置的“figure”div是绝对的，它会忽略其他元素的位置。将位置更改为另一种类型，例如“position：relative”，并将其自身与其他元素放在一起。

我不是最有信心的HTML和CSS技能，但我希望我的两分钱至少可以帮助你向前推进。

Answer 2

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

另外，使用img。

将文本块移动到一个div中

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

默认情况下，div有显示屏，因此它会占据整行，text-align: center;只会使您的文字居中。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: