僅在圖像中定位文本，而不是在所有瀏覽器窗口中定位文本

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

所以，問題是 - 「頂：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

得到答案這樣的事情最好的辦法是： 首先==>創建一個小提琴 Possible solution (jsfiddle example)

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

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