1

我正在尝试将标题水平和垂直居中放在图像顶部。到目前为止，我已经将垂直居中向下（这是相对和绝对定位的原因）。但是，水平居中现在给我带来了问题：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/

4

1 回答 1

1

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

于 2013-04-08T18:14:47.767 回答