Html 将h1居中放置在div中的图像上

如何正确地将（垂直、水平）居中于图像上方

<div class="category-info">
    <div class="image">
            <h1>Title</h1>
            <img src="image.jpg" />
        </div>
    </div>

图像的宽度为770px，高度为200px。我不知道下一步该怎么办。我尝试了几件事，但都没有成功

你试过这个吗

h1 { text-align:center; }

给你：

CSS：

.image{
    position: relative;
    background: green; /* IE */
}
.image h1{
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    font-size: 20px;
    width: 100%;
    height: 26px;
    padding: 0;
    margin: 0;
    margin-top: -13px; /* 1/2 height */
    text-align: center;
    background: red;
    background: rgba(170, 0, 0, 0.8); /* CSS3 */
}
.image img{
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:green
}

html

---

除此之外

我在

.image

类上抛出了一个相对位置，并设置了image元素的宽度和高度（这样在加载时它不会调整大小）。我将表格改回了

h1

，并添加了200px的行高。这是唯一的缺点，您仍然需要手动设置

h1

的行高度

HTML:

---

JSFiddle:

不幸的是，这在我的情况下不起作用，因为源代码来自php代码/数据库。@阿德里安：我修改了代码以便在代码中接收图像。是的，我删除了它。谢谢，我试过了h1将位于图像的顶部，而不是上方。还有一件事，我希望h1也垂直/水平居中（到图像的中心）。我添加到了您以前的代码行高度：200px（h1），这是可行的。我觉得这样比较容易？如果您接受我的解决方案，请更改回代码。：）谢谢，嗯，很有意思，但是为什么呢？对我的口味来说太多的调整了。假设您要更改字体大小。然后您必须更改h1的高度，然后将边距更改为高度的一半。@tedski，但这只需要一次。宽度和高度的内联样式考虑了实现细节。只需阅读“水平/垂直”要求。。垂直定心很难做到。。。看看吧，为什么有桌子？减慢渲染速度。Idk这是我见过的唯一可靠的获取垂直对齐内容的方法。这是47个字符。。。不会让网站的速度明显减慢。谢谢你的更新。我使用相同的代码（这是Mooseman的原始代码），但他说它可能不适用于任何地方。我有点困惑，不知道他指的是什么。我真的不认为它有什么理由侵入其他浏览器。我只是觉得我的解决方案更干净：）

.image{
    position: relative;
    background: green; /* IE */
}
.image h1{
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    font-size: 20px;
    width: 100%;
    height: 26px;
    padding: 0;
    margin: 0;
    margin-top: -13px; /* 1/2 height */
    text-align: center;
    background: red;
    background: rgba(170, 0, 0, 0.8); /* CSS3 */
}
.image img{
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:green
}

<h1 style="background-image:url(your php source.img)">Title</h1>

h1 {
    height: 200px;
    width: 770px;
    margin-bottom: 20px;
    text-align:center;
    vertical-align:middle;
    line-height:200px;
    background:transparent no-repeat scroll 50% 50%;
   }

<div class="category-info">
    <div class="image">
         <h1>Title</h1>
        <img src="http://placekitten.com/770/200" />
    </div>
</div>

.category-info {
    text-align: center;
    margin-bottom: 20px;
}

.image{
    position:relative;
}

.image img{
    width:770px;
    height:200px;
}

.image h1{
    position:absolute;
    width:100%;
    color:white;
    line-height:200px;
    margin:0;
}