如何在按鈕元素的頂部（和背景圖像上方）定位文本？

Question

這是我想要實現的目標：

我正在嘗試將文本放在背景圖像上方或將背景圖像放在文本下方，並讓圖像和文本可以點擊，因為它是一個button 。

但我無法將文本放在button的頂部。 vertical-align似乎沒有任何影響。

是否可以使用單個按鈕元素進行操作？

  button { width: 96px; height: 150px; border: none; border-radius: 0px; line-height: 100px; background-position: 50% 58px; background-size: contain; background-repeat: no-repeat; background-color: transparent; margin: 20px; } button.document { border: 1px solid red; } 

 <button class="document" style="background-image: url(http://icons.iconarchive.com/icons/iynque/flat-ios7-style-documents/96/doc-icon.png)"> Plot Plan.doc </button> 

Answer 1

刪除line-height並添加padding-bottom以偏移文本：

 button { width: 96px; height: 150px; border: none; border-radius: 0px; background-position: 50% 58px; background-size: contain; background-repeat: no-repeat; background-color: transparent; margin: 20px; padding-bottom: 125px; } button.document { border: 1px solid red; } 

 <button class="document" style="background-image: url(http://icons.iconarchive.com/icons/iynque/flat-ios7-style-documents/96/doc-icon.png)"> Plot Plan.doc </button> 

Answer 2

我的是James Montagne的改編版。 我刪除了高度（應該是內容因子+（填充/圖像）並將按鈕定位在元素的底部。

這在CSS中的工作方式首先是輸出所有文本，提供大約40px（Y）的內容。 然后，它在下面添加了96px的填充 - 足夠的額外空間來包含背景圖像。 最后，它使用background-position來決定放置背景圖像的位置; 在底部。 這減少了每個“位置變量”的耦合，這可能使其更容易更改。

 button { width: 96px; border: none; border-radius: 0px; background-position: 50% bottom; background-size: contain; background-repeat: no-repeat; background-color: transparent; margin: 20px; padding-bottom: 96px; } button.document { border: 1px solid red; } 

 <button class="document" style="background-image: url(http://icons.iconarchive.com/icons/iynque/flat-ios7-style-documents/96/doc-icon.png)"> Plot Plan.doc </button> 

Answer 3

我能得到的最好的：

 button { width: 96px; height: 150px; border: none; border-radius: 0px; background-position: 10% 140%; background-size: contain; background-repeat: no-repeat; background-color: transparent; margin: 20px; } button.document { border: 1px solid red; } 

 <button class="document" style="background-image: url(http://icons.iconarchive.com/icons/iynque/flat-ios7-style-documents/96/doc-icon.png)"> Plot Plan.doc </button> 

增加了一些背景定位background-position: 10% 140%; - 水平10％，垂直定位140％。