Question

这是我试图实现的目标：

我尝试将文字放在背景图片上方或将背景图片放在文字下方，并让图片和文字可以点击，因为它是Python 3.4.3 (v3.4.3:9b73f1c3e601, Feb 24 2015, 22:44:40) [MSC v.1600 64 bit (AMD64)] on win32 Type "help", "copyright", "credits" or "license" for more information. >>> import sys >>> sys.stdin.encoding 'utf-8' >>> s = 'ф'。

但我无法将文字放在button的顶部。 button似乎没有任何影响。

是否可以使用单个按钮元素进行操作？

＆＃13;

vertical-align

＆＃13;

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

＆＃13;

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来决定放置背景图像的位置;在底部。这减少了每个＆＃34;位置变量＆＃34;的耦合，这可能使其更容易更改。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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％。

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

3 个答案: