将文本放在图像右半边的中心答案

【问题标题】：Place text at the centre of right half of an image将文本放在图像右半边的中心
【发布时间】：2014-11-01 07:13:40
【问题描述】：

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

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

}

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

【问题讨论】：

请分享现有代码以及到目前为止您尝试过的内容...
使用position:absolute; top:50%; right:10%;
@GoosvandenBekerom 我不会担心这个。你能展示你最好的解决方案吗？这样我就可以与我的解决方案争论。
为什么是 10%？我希望文本始终不超过图像左半边的 50% 边界，我认为 10% 不会在较小的屏幕上工作。
@SureshPonnukalai 说 10% 在右边，而不是从左边......这完全取决于图片的大小和文本的宽度，css 中没有计算可以告诉它到“图像的右半部分居中”...

标签： html css

【解决方案1】：

如果文本不是动态的，您总是可以知道容器的大小（将容器作为内联块元素）。浏览器显示的文本可能略有不同，因此大小可能会改变一些像素。这意味着该解决方案不会 100% 准确，而是接近。

正如您在 FIDDLE 中看到的那样，文本容器大小为 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;

margin left 是容器宽度的一半。

希望对你有帮助

已编辑：或如 Suresh 建议的那样（更好的主意）使用 text-align:center 将固定宽度设置为 text-center ，并再次将 margin-left 设置为减去该宽度的一半，就像在这个更新的 FIDDLE

【讨论】：

【解决方案2】：

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

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

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

这是通过 `transform:translate(-50%,-50%); 实现的；

Full Page Jsfiddle Demo

注意：我特意限制了文本元素的宽度，因为超长的文本会从环绕的 div 中流出。

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

* {
    -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%); 
}

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

【讨论】：

【解决方案3】：

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

 .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

【讨论】：