Question

我想让HTML中的文本放在图像上并定位在该图像上而不是浏览器窗口。

我的HTML -

<div class="menu">
    <img src="images\menu.png">
    <div class="start-button">
        <p><a href="index.html" style="text-decoration: none; color: white">Start</a></p>
    </div>
</div>

我的CSS -

.menu {
  position: relative;
  text-align: center;
}
.menu .start-button {
  position: absolute;
  text-align: center;
  top: 2%;
  left: 2%;
}

问题是 - “top：2％”运作良好，但“左：2％”不太好。我怎么解决这个问题？

Answer 1

将display：inline-block添加到菜单类。

Answer 2

我不确定它是如何与你的图像一起工作的。这是我最好的猜测：

.menu .start-button {
  display: block;
  position: absolute;
  width: 100%;
  top: 35%;
}

<强> Live demo (click).

另请注意，您可以使用较少的html获得相同的结果：

<div class="menu">
  <img src="http://placehold.it/350x150">
  <a>Start</a>
</div>

我所做的只是让<a>标签自然位于<img下方并居中，然后使用top将其拉出。

Answer 3

获得这样的答案的最佳方法是：首先是==＆gt;创造一个小提琴 Possible solution (jsfiddle example)

.menu
{
  position: relative;
/*  text-align: center;*/
/*   display:inline; */
}

.menu .start-button
{
  position: absolute;
  top:2%;
  left:2%;
}

仅将文本定位到图像中

3 个答案: