如何在沒有單獨的div標籤的情況下將文本居中放在圖像上？

小提琴：http://jsfiddle.net/d35QD/如何在沒有單獨的div標籤的情況下將文本居中放在圖像上？

我想知道如何在不使用div標籤的情況下在圖片中間放置文字。我正在創建一個導航菜單，並且不希望將每個按鈕都包裹在單獨的div標籤中。可能很簡單，但我是新來的CSS :-P。

此刻我正在使用絕對定位。如果在所有瀏覽器中以完全相同的方式顯示文本，這可以，但顯然不是這樣，所以我需要另一種方法。

任何幫助表示讚賞！謝謝！

<div id="nav"> 
<ul> 
    <li><a href="index.htm"><img class="navbutton" src="http://www.cawyatt.co.uk/test-top.png" alt="Website Navigation. Home Button" title="Home" /><p class="homebutton">HOME</p></a> 
    </li> 
</ul> 
<!-- end .nav --> 
</div> 


ul, ol, dl { 
padding:0; 
margin:0; 
list-style:none; 
} 

#nav { 
background-image: url(http://www.cawyatt.co.uk/test-bottom.png); 
width:120px; 
height:115px; 
position:relative; 
} 

#nav img{ 
height:115px; 
width:120px; 
} 

.navbutton { 
-webkit-transition:opacity 0.7s ease-in-out; 
-moz-transition:opacity 0.7s ease-in-out; 
-o-transition:opacity 0.7s ease-in-out; 
transition:opacity 0.7s ease-in-out; 
float:left; 
} 

a:hover img.navbutton { 
opacity:0; 
} 

.homebutton { 
position:absolute; 
left:1px; 
top:60px; 
color:rgba(255, 255, 255, 1); 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-weight:bold; 
font-size:16px; 
}

編輯：

的方法建議如下工作的時候它只是一個按鈕，而不是當有不止一個。所有的文本都會集中在第一個按鈕上。我創造了另一種小提琴說明我的意思：

http://jsfiddle.net/3JCKB/

編輯2：

感謝所有幫助球員。通過更改p標籤以跨越標籤來管理解決此問題。這工作，因爲跨度是一個內聯元素，其中的p是:-)

塊級元素，您可以看到完成的代碼在這裏：http://jsfiddle.net/yTACT/

我也清理了代碼，並刪除不必要的類。再次感謝！

來源

2013-03-27 Chris

也許你可以使用圖片作爲背景和文本中心在它...背景圖像：網址（「paper.gif」）; – 2013-03-27 12:55:55

http://jsfiddle.net/3YWPx/ – Paul 2013-03-27 13:00:27

是這樣的嗎？ http://jsfiddle.net/d35QD/10/ – 2013-03-27 13:06:56

這樣做有兩個好方法：

1：

.homebutton{ 
    position: relative; 
    right: 120px //width of image 
    width: 120px; 
    text-align: center; 
}

2：

取出圖象，並將其設置爲.homebutton

的背景圖像

.homebutton{ 
    background: url('http://www.cawyatt.co.uk/test-top.png') no-repeat left top; 
    width: 120px; 
    height: 115px; 
    text-align: center; 
}

來源

2013-03-27 13:00:47 Bill

第一種方法只在使用1按鈕時起作用，但是當我添加更多的所有文本時，都集中在第一個按鈕上。我無法使用第二種方法，因爲我已經在使用css bg圖像進行懸停效果。我創建了另一個小提琴，以顯示我的意思： – Chris 2013-03-27 16:00:13

http://jsfiddle.net/3JCKB/ – Chris 2013-03-27 16:00:38

您的.navbuttontext絕對定位，我懷疑這是問題所在。 – Bill 2013-03-27 16:46:56

我不確定是隻想水平居中還是水平居中。無論如何，你可以試着這樣做：

p{ 
    width: 120px; // Same width as your image 
    text-align: center; // Center text horizontally 
}

來源

2013-03-27 13:04:33 Djouuuuh

這些方法在創建一個按鈕時起作用，但是當我添加更多全部文本時，它們都集中在第一個按鈕上。我已經創建了另一個小提示，告訴你我的意思： – Chris 2013-03-27 18:39:57

jsfiddle.net/3JCKB – Chris 2013-03-27 18:40:25

感謝所有的幫助傢伙。通過更改p標籤以跨越標籤來管理解決此問題。這是可行的，因爲span是一個內聯元素，其中p是塊級元素:-)。你可以在這裏看到完成的代碼：http://jsfiddle.net/yTACT/。我也清理了代碼並刪除了不必要的類。再次感謝！ – Chris 2013-03-28 09:59:27

#nav li > a > p { text-align: center; width: 100%;}

設置段落100％錨寬的寬度，然後對齊文本在該領域中心。

UPDATED FIDDLE

來源

2013-03-28 10:04:23 Scott

如何在沒有單獨的div標籤的情況下將文本居中放在圖像上？

回答

相關問題