Question

我有一个关于HTML的问题我希望我的文本位于图像的中间而不是图像之外。它必须位于特定X和Y位置的图像内部。

到目前为止我的代码：

  <center>
  <div style='position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; overflow: show;'>
     <div id='loadingtext' style='margin-top: 10px; color: #666; font-family: Arial; font-size: 12px; font-weight: bold;'>Loading Text..</div>
     <img src='http://oi58.tinypic.com/2wmou89.jpg'>

    </div>
  </center>

  <div style='-webkit-box-reflect: below -120px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), to(rgba(255, 255, 255, 1.0))); position: absolute; top: 90%; right: 0; bottom: 0; left: 5%; height: 100px; overflow: show; font-family: Arial; font-size: 24px; font-weight: bold; color: #888' id='files'>
  </div>

</div>

我希望文本位于图像的中间，以便人们可以在图像中间看到加载文本。

Answer 1

您只需将包含div的位置从绝对更改为相对，并将div设置为id = loadingtext为absolute，z-index并根据您的需要定位（例如：left：50％;顶部：50％;）并且文本将位于图像的顶部。

Answer 2

1st：请删除关键字＆＃34; javascript＆＃34;并用＆＃34; css＆＃34;替换它;）

第二：以下是最简单的CSS解决方案。如果文本不能具有固定宽度，则需要其他解决方案或javascript。但我建议使用固定宽度，因为长线是丑陋的。忘记可怕的z-index解决方案。我们不需要z-index。元素的顺序具有相同的目的。

第3名：解决方案

<div style="position: absolute;">
    <img src="http://oi58.tinypic.com/2wmou89.jpg">
    <div id="loadingtext" style="position:absolute; top:50%; left:50%; color: #666; font-family: Arial; font-size: 12px; margin-top:-6px; width:128px; margin-left:-64px; font-weight: bold;">Loading Text..</div>
</div>

margin-top为0-（font-size / 2），margin-left为0-（width / 2）......

获取图像内的文字？

2 个答案: