Question

假设我有一个跨度，其背景包含图像和div中的一些文本，如：

<div id="myDiv">
    <span style="background: url('path_to_background_image');">My Span</span>
    <span>Some text...</span>
</div>

我希望文本Some text...始终显示在左侧跨度的中间右侧位置（以图像为背景的跨度）。文本是动态的，所以我希望文本始终保持在左侧跨度的右侧（中心到右侧），无论文本增长多少或文本缩小多少。是否有可能在没有JQuery的情况下实现这样的东西（只是简单的HTML和CSS）？

请告诉我。

谢谢

Answer 1

我认为你最好只使用div，特别是如果你总是希望文本在某个地方。例如，如果您希望它们中的两个位于中心并且只希望它占据指定的大小，那么：

  <style>
    #wrapper{margin-left: auto: margin-right: auto: width: 700px;}
    #title{float: left; width: 20%};
    #text{float: left; width: 80%};
  </style>


  <div id="wrapper">
    <div id="title">Title</div>
    <div id="text'>...Random amount of Text</div>
  </div>

你可以利用边缘等来完善它。

Answer 2

我同意Verber使用div，但是，我刚刚用以下代码实现了你正在寻找的效果：

<style>
.with-background {
position:relative;
height:250px;
width:600px;
background:url(bg-image.jpg);
}

.caption {
position:relative;
left:350;
background:pink;
top:50;
width:200px;
height:100px;
}
</style>

..和标记：

<div class="with-background">
    <div class="caption">
        <p>Some Text</p>
    </div>
</div>

此代码在中心右侧稍微设置一个正方形文本（使用左：350），从顶部边框设置50个像素（使用顶部：50）。由于背景图像的宽度为600像素，因此我将“caption”类的“left”属性设置为350，仅略高于背景图像宽度的一半。根据你自己背景图片的大小进行修改，你应该好好去。

“背景：粉红色;”属性是这样我可以很容易地看到div的位置：）

中心文本相对于元素，但右侧css

2 个答案: