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

我试着在背景图像上放置一些文本，如下图所示，文本应该位于图像右半部分的中心。有人知道怎么解决这个问题吗？

html

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

---

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

 .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;}

---

如果文本不是dinamic，则始终可以知道容器与内联块元素之间的大小。浏览器可能会显示略有不同的文本，因此大小可能会改变一些像素。这意味着这个解决方案不是100%精确，而是非常接近

如图所示，文本容器大小为148 x 27 chrome，因此您只需调整边距即可将其设置为正确：

.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为文本中心设置一个固定的宽度，并且再次将左边距设置为减去该宽度的一半，就像在这个更新的

中那样，您可以通过文本元素的绝对定位和CSS转换来管理它

通过定位元素top:50%，left:75%，我们将元素的左上角推到div宽度的3/4处，如图所示

然后我们将元素向左移动一半，向上移动一半，确保文本元素的中心现在正好向左移动75%，向下/向上移动50%

这是通过“transform:translate-50%，-50%实现的

注意：我特意限制了text元素的宽度，因为过长的文本可能会从包装div中流出

如果您知道文本不会溢出，可能是因为您只有几个单词，您可以删除最大宽度并设置空白：nowrap；当前已注释掉，文本将采用自己的宽度

* { -webkit框大小：边框框； -moz框大小：边框框； 框大小：边框框； } .全宽{ 位置：相对位置； 显示：内联块； } .文本中心{ 背景：rgba255255,0.25； 颜色：白色； 位置：绝对位置； 左：75%； 最高：50%； 边框：1px纯黑； 宽度：自动； 文本对齐：居中； 最大宽度：25%；/*见注释*/ /*空白：nowrap*/ 转化：转化-50%，-50%； } 洛雷姆·伊普苏姆·多洛。 Lorem ipsum dolor sit amet，Concertetur。

---

请分享现有的代码和您迄今为止尝试的内容…使用position:absolute；最高：50%；右：10%@我不会担心的。你能展示你最好的解决方案吗。这样我就可以和我的解决方案争论。为什么是10%？我希望文本永远不要超过图像左半部分50%的边界，我认为10%在较小的屏幕上不起作用。@SureshPonnukalai说10%在右边，而不是从左边。。。这完全取决于图片的大小和文本的宽度，css中没有计算会告诉它在图像的右半部分居中。。。

 .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;}

.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;