如何在按钮元素的顶部（和背景图像上方）定位文本？

Question

This is the look I'm trying to achieve:

I'm trying to position the text above the background image OR position the background image below the text, AND have the image and the text be clickable as it is a button .

But I can't get the text at the top of the button . vertical-align doesn't have any effect it seems.

Is it possible to do it with a single button element?

  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

Remove your line-height and add padding-bottom to offset the text:

 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

Mine is a modification of James Montagne's. I removed height (which should be a factor of content + (padding/image) and positioned the button to appear at the bottom of the element.

The way this works in CSS is first, it outputs all text, giving about 40px (Y) of content. Then, it adds 96px of padding below - enough extra space to contain the background image. Finally, it uses background-position to decide where to put the background image; at the bottom. This reduces the coupling of each "position variable", which might make it easier to change.

 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

The best I could get:

 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> 

Added some background positioning background-position: 10% 140%; - 10% for horizontal and 140% for vertical positioning.