html - 文本相对于元素居中，但相对于右侧的 css

Question

假设我有一个 span，其背景包含图像和 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>

您可以调整边距等以使其完美。