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

时间：2014-10-30 07:58:40

标签： html css

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

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

}

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

enter image description here

3 个答案:

答案 0 :(得分：0)

如果文本不是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} }

答案 1 :(得分：0)

您可以使用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;

答案 2 :(得分：-1)

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

 .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

相关问题
最新问题