如何水平居中位置的头部：绝对

Question

我正试图在图像顶部水平和垂直居中标题。到目前为止，我已经垂直居中（这是相对和绝对定位的原因）。但是，水平居中现在给我带来了问题：margin:0 auto;不起作用，left:50%;不起作用且text-align:center不起作用。有谁知道如何将标题水平居中放在图像顶部？

详细说明：

• 我不知道任何元素的高度或宽度，所以我不能使用固定的高度或宽度
• 将图像设置为背景不是一种选择，因为图像是内容的一部分
• 并非所有标题都是相似的长度，所以我必须找到一个动态解决方案（它们都将是一行，我会用省略号将它们删除）

HTML

<article>
    <h2>Title</h2>
    <img src="http://bit.ly/gUKbAE" />
</article>

CSS

article { 
    position: relative; 
}

h2 {
    line-height: 0;
    position: absolute;
    top: 50%; 
    left: 0;
    margin: 0;
    padding: 0;
}

就在这里：http://jsfiddle.net/kmjRu/21/

Answer 1

您可以将article设置为display: inline-block和width: auto，然后将h2置于中心位置： http://jsfiddle.net/kmjRu/28/