Question

我有一个包含标题文字和图片的div。

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

HTML code：

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

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

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

Answer 1

您可以删除图片代码并将图片作为容器div的背景。

<强> HTML

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

<强> CSS

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

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

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

Answer 2

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



Here is some example markup:

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


And its corresponding CSS:

中

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

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

Answer 3

以下内容对您有帮助。

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

请注意，在此方法中，您必须手动设置height元素的width和text。此外，height应该line-height重复{{1}}，以使垂直对齐正常工作。

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

Answer 4

我不建议使用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

使用HTML和CSS在文本上放置文本

4 个答案: