使用 HTML 和 CSS 在图像上放置文本答案

【问题标题】：Placing a text over an image with HTML and CSS使用 HTML 和 CSS 在图像上放置文本
【发布时间】：2014-04-27 11:24:25
【问题描述】：

我有一个包含标题文本和图像的 div。

使用下面的代码，标题显示在图像上方。

HTML 代码：

<div class="thumbnail">
  <div class="text">
  <center>Heading</center>
  </div>
  <div class="image">
  <img src="sample.png">
  </div>
</div>

我想对齐标题，使其出现在图像的中心（垂直和水平）。

如何使用 HTML 和 CSS 实现这一点？

【问题讨论】：

center 元素已弃用，您不应使用它。
你可以在这里找到答案：stackoverflow.com/questions/8708945/…
它使水平居中对齐。我想将它垂直居中对齐。 @詹姆斯唐纳利
@user3392772 en.wikipedia.org/wiki/Deprecation 您可以通过将css应用于文本div来水平居中文本
@user3392772 您可能希望接受其中一个答案作为正确答案；)

标签： html css

【解决方案1】：

我不建议仅使用 lineheight 来垂直对齐文本（正如一些答案所暗示的那样），因为如果标题太长并且跨越两行，它看起来会很糟糕。

我要做的是绝对定位标题，然后使用display: table-cell 垂直对齐它。

注意要能够使用此解决方案，您必须指定标题的高度。

HTML

<div class="thumbnail">
  <div class="text">
      <h1>Heading</h1>
  </div>
  <div class="image">
      <img src="http://placehold.it/350x250" />
  </div>
</div>

CSS

  .thumbnail{
    position: relative; 
    display: inline-block;
}
.text{
    position:absolute; 
    top: 0px; 
    left: 0px; 
    width: 350px;
}
.text h1{
    height: 250px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;  
    width: 350px; 
    color: #fff;
}

JSfiddle here

【讨论】：

【解决方案2】：

以下内容可能会对您有所帮助。

HTML：

<div class="thumbnail">
    <div class="text">
         Heading
    </div>
</div>

CSS：

.text {
    background-image: url('http://cs616623.vk.me/v616623331/7991/vPKjXbo-c7o.jpg');
    width: 320px;
    height: 240px;
    line-height: 240px;
    vertical-align: middle;
    text-align: center;
    font-size: 48px;
}

请注意，在这种方法中，您必须手动设置 text 元素的 height 和 width。此外，height 应在line-height 中复制，以便垂直对齐正常工作。

您可以测试并更改相应JSFiddle 中的代码，或者只检查full-screen result。

【讨论】：

我无法将图像放入 css 中。因为不同缩略图的图片 url 会发生变化
哦，我明白了！请考虑将这些详细信息添加到您的问题中，以使其更具体。这样你会以更短的方式收到答案:)

【解决方案3】：

你可以去掉图片标签，让图片成为容器div的背景。

HTML

<div class="text">
    Heading
</div>

CSS

.text {
    background-image: url('sample.jpg');
    text-align: center;
}

编辑：我不想将它作为我的完美答案出售，但我意识到我错过了垂直对齐，并且由于 cmets 和答案中已经提供了类似的解决方案，让我只需在下面为您提供良好的信息来源。关键是如果你使用span 或其他内联元素，你可以使用vertical-align:middle，但使用div，你必须使用其他技巧，如position:absolute 和减去边距。

来源：http://phrogz.net/css/vertical-align/index.html

【讨论】：

我不能用这个。因为图像总是在变化。有很多这样的缩略图...（使用 PHP 完成）
就像我说的，还有其他选择，查看我的链接或其他人给出的答案...
对不起，我没明白
抱歉，您没有得到什么？
事情也必须响应...我标记的答案得到了它的工作@webeno

【解决方案4】：

除了使用center 元素之外，您的标记大部分是正确的，并且您不需要将img 元素包装在div. 中

这是一些示例标记：

<div class="thumbnail">
  <h1>Heading</h1>
  <img src="sample.png">
</div>

及其对应的CSS：

.thumbnail {
  位置：相对；
}
.thumbnail h1 {
  文本对齐：居中；
  位置：绝对；顶部：50%；左侧：0；宽度：100%；
  边距顶部：-20px； /*使负上边距= h1元素高度的一半*/
}

您始终可以使用 h1 以外的元素来保存您的标题。这仅取决于您的偏好。

【讨论】：