将文字放在图片的顶部

Question

问题： 我在将文本放在具有全宽的图片中间时遇到问题。

目前它有点好，但不是每个决议。

我的代码：       jsfiddle

我试图用

来实现这个目标

.title{
    position:absolute;
    left: -140px;
    top: 100px;
}

我已经尝试将％用于left和top，但它仍在四处移动。

尝试更改结果区域，您会看到文字正在移动，我不想要。

我想要的是h2和h6无论使用哪种分辨率都位于该图片的中间。

我该如何解决这个问题？

谢谢。

Answer 1

使用这种方式：

.titles {
    color: white !important;
    position: absolute;
    top: 100px;
    text-align: center;
    width: 100%;
}

小提琴：http://jsfiddle.net/praveenscience/c5f3bufq/

Answer 2

使用您不会遇到问题的相对属性。

.titles {
    color: white !important;
    left: 75px;
    position: relative;
    top: 150px;
}

Answer 3

这可以更轻松地完成。你可以将标题放在一个div中，img不需要在div中。然后只需将文本对齐在中心。我甚至添加了垂直中心逻辑：

.title h2 { 
    position: relative;
    /* Vertical center */
    top: 50%;
    transform: translateY(-50%);
    /* prefixes needed for cross-browser support */
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);

    /* Horizontal center  */
    text-align: center;

    /* Push it up a little, to position it nicely in the image */
    margin-top: -1em; 
}

<强> Full JSFiddle Demo

Answer 4

＆＃13;

＆＃13;

.titles{position:relative;}
.text h2,
.text h6{
    color: #fff;
    display: inline-block;
    margin: 0 2px;
}
.text{
    position:absolute;
    text-align:center; /* or use left:10%; ?*/
    top:42%;
    width:100%;
}
.titles img{ width:100%;}

＆＃13;

<div class="titles">
    <img src="http://i62.tinypic.com/4sz2gx.jpg"/>
    <div class="text">
        <h2>Lorem, dolorem</h2>
        <h6>Lorem dolorem lorem dolorem</h6>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;