如何将文本置于图像正下方（如卡片）

Question

我是编程新手 CSS。我对 CSS 不是很熟悉，目前正在努力学习它。我想在它下面放一张图片和一些文字。我为文本添加了背景颜色并稍微更改了不透明度以使其看起来更好看。我这样做的方式是首先将图像放在我想要的位置，然后将文本放在它的正下方。但这会占用很多时间，因为我使用的是边距。我一直不得不改变它，让它完全低于它。必须有更好的方法，对吗？有人可以告诉我是否有更好的方法吗？如果有，如何将文本放置在我的代码的图像下方？

HTML:



 <div id="RPSprev">
    <img src="/assets/RPSprev.png" class="projectPreviews">
    <p id="RPSprev-header">Rock Paper Scissors</p><br>
    <pre>
    <p id="RPSprev-para">
        Rock paper scissors is a hand game usually played between two people, in which
        each player simultaneously forms one of three shapes with an outstretched hand. 
        These shapes are 'rock', 'paper', and 'scissors'
    </p>
    <pre>
    </div>

CSS:


.projectPreviews {
    height: 500px;
    width: 800px;
    position: absolute;
    top: 100%;
    left: 24%;
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

#RPSprev-header {
    position: relative;
    font-size: 50px;
    top: 820px;
    left: 23.75%;
    height: 30%;
    width: 53.25%;
    font-family: 'Ubuntu', sans-serif;
    background-color: rgba(238, 238, 238, 0.6);
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
}

#RPSprev-para {
    font-size: 20px;
    font-family: 'Ubuntu', sans-serif;
    position: absolute;
    bottom: -750;
    left: 350;
}

这是我使用保证金制作的。然而，这花了很多时间。

Answer 1

您可以在 #RPSprev 上使用 <br> 或 flex-direction: column，以便所有内容整齐对齐，然后只需将文本居中 text-align: center

Answer 2

这是您提出的问题的更简单的演示。我提供的解决方案是使用 flex box。确保 p 标签也有一个 margin:0 以删除图像和文本之间的 space。

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
}
.wrapper img {
  width: 50%
}
.wrapper p {
  width: 50%;
  margin: 0;
  background-color: red;
}

<div class="wrapper">
  <img src="https://miro.medium.com/max/1600/1*8du96SQUQ0NlWmWvVu20Zw.png" alt="game image">
  <p> Some text here and description... </p>
</div>

Answer 3

主要问题是您将 .projectPreviews（图像）定位为绝对位置。这意味着后面的所有内容都将移动到它下面。也许您这样做是为了将图像移动到屏幕中央？看来您首先需要进一步了解 HTML 和 CSS。

无论如何，这可能会有所帮助：

<div id="RPSprev">
    <img src="/assets/RPSprev.png">
    <div id="RPSprevContent">
        <h2>Rock Paper Scissors</h2>
        <p><pre> Rock paper scissors is a hand game usually played between two people, in which
        each player simultaneously forms one of three shapes with an outstretched hand. 
        These shapes are 'rock', 'paper', and 'scissors'</pre></p>
    </div>
</div>

#RPSprev {
  position: absolute;
  width: 800px;
  left: 50%;
  margin-left: -400px;
  top: 40px;
}
#RPSprev img {
  display: block;
  width: 800px;
  height: 500px;
  border-radius: 13px 13px 0 0;
}
#RPSprevContent {
  background: rgba(238, 238, 238, 0.6);
  border-radius: 0 0 13px 13px;
  padding: 1rem;
}

Answer 4

要在图像下方放置一些文本（如标题），您只需使用 HTML 中的 <picture> 元素即可。这是一个例子：

 <picture style="border:1px solid black">
  <img src="https://images.theconversation.com/files/94013/original/image-20150907-22253-rnp0iv.jpg?auto=format&q=45&w=1356&h=668&fit=scale" height="200px" width="200px"><br>
  <caption>This is a caption</caption>
</picture> 

<br><br>
<span>This is some test outside of the picture element</span>

我给图片元素添加了边框只是为了显示它的尺寸和边界。

如何将文本置于图像正下方（如卡片）

How to position a text right below an image(like a card)

html

css

position

margin