将文本放在图像右半部分的中心

Question

我正在尝试将一些文本放在背景图像的顶部，如下图所示，文本应位于图像右半部分的中心。有谁知道如何解决这个问题？

HTML

<div class="full-width">
    <div class="text-center"><h2 class="text">text</h2></div>     
    <img src="img/example.jpg">

</div>

CSS

.text{
    position:absolute;
    margin-left: 50%;
    margin-top: 1em;


}

.full-width{
    width:100%;

}

评论中的一些解决方案显示如下结果：

Answer 1

如果文本不是dinamic，您可以随时知道容器的大小（将容器设置为内联块元素）。浏览器可能会显示略有不同的文本，因此大小可能会更改某些像素。这意味着这个解决方案不会100％准确但是接近。

正如您在此FIDDLE中看到的那样，文本容器大小为148 x 27（镶边），因此您只需调整边距即可将其设置为正确：

.text-center {
    position:absolute;
    left: 75%;
    top: 50%;
    margin-left:-74px;
    margin-top:-27px;
    display:inline-block;}

.full-width{
    width:100%;
    overflow:hidden;
    position:relative;

剩余边距是容器宽度的一半。

希望这可以帮到你

编辑：或者像Suresh建议的那样（更好的主意）使用text-align：center将固定宽度设置为文本中心，并再次将margin-left设置为宽度的一半，如此更新{{3} }

Answer 2

您可以使用text-element和CSS转换的绝对定位来管理它。

通过定位元素top:50%, left:75%，我们将元素的左上角推到div宽度的3/4处（由图像定义）......

然后我们将元素向左移动一半，并将其自身的高度调高一半，确保文本元素的中心现在正好在75％左右，向下/向下50％。

这是通过`transform：translate（-50％， - 50％）;

来实现的

Full Page Jsfiddle Demo

注意：我故意限制文本元素的宽度，因为超长文本可以从包装div流出。

如果你知道文字不会溢出，可能是因为你只有几个单词，你可以删除max-width并设置white-space:nowrap;（目前已注释掉），文字将会删除它＃39;自己的宽度。

＆＃13;

＆＃13;

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.full-width {
    position: relative;
    display: inline-block;
}

.text-center {
    background: rgba(255,255,255,0.25);
    color:white;
    position: absolute;
    left:75%;
    top:50%;
    border:1px solid black;
    width:auto;
    text-align: center;
    max-width:25%; /* see note */
   /*white-space:nowrap; */
    transform:translate(-50%,-50%); 
}

＆＃13;

<div class="full-width">
    <div class="text-center">
        <h2 class="text">Lorem ipsum dolor.</h2>
    </div>
    <img src="http://lorempixel.com/output/animals-q-c-640-250-4.jpg"/>
</div>

<div class="full-width">
    <div class="text-center">
        <h2 class="text">Lorem ipsum dolor sit amet, consectetur.</h2>
    </div>
    <img src="http://lorempixel.com/output/nightlife-q-c-800-300-7.jpg"/>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在我的评论中，我只是提出一个想法而不是一个确切的解决方案。以下是您所寻找的确切解决方案。

 .full-width{position:relative; width:420px;}
 .text-center{position:absolute; top:50%; margin-top:-25px; right:25%; margin-right:-50px;}
 .text{padding:0; margin:0; width:100px; height:50px; border:1px solid #000;}

FIDDLE DEMO