如何使圖像導航出圖像並在圖像內添加文本？

Question

我想創建一個導航欄的按鈕。我創建了我自己的按鈕，但是Im在如何在圖像中添加文本並居中對它有困難。我怎樣才能做到這一點？

這是我的按鈕：http://agnesvaldovinos.com/images/bubble.png

Answer 1

.button { 
 
    background: url(http://agnesvaldovinos.com/images/bubble.png) no-repeat 0 0; 
 
    color: #fff; 
 
    line-height: 61px; 
 
    height: 61px; 
 
    display: inline-block; 
 
    width: 126px; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    text-decoration: none; 
 
    text-indent: -.5em; 
 
}

<a href="#" class="button">My button</a>

關於您在您的評論添加的要求，你將不得不片兩個部分的圖像，並使用所謂的sliding-doors technique。此外，您的a標籤還需要另一個標籤，例如一個span，能夠應用這種技術。

http://alistapart.com/article/slidingdoors

http://codepen.io/anon/pen/bdLKKb