如何在按钮元素的顶部(和背景图像上方)定位文本?

时间:2015-11-04 19:00:05

标签: css

这是我试图实现的目标:

enter image description here

我尝试将文字放在背景图片上方或将背景图片放在文字下方,并让图片和文字可以点击,因为它是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似乎没有任何影响。

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



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




3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:2)

我的是James Montagne的修改。我删除了高度(应该是内容的一个因子+(填充/图像)并将按钮定位在元素的底部。

这在CSS中的工作方式首先是输出所有文本,提供大约40px(Y)的内容。然后,它在下面添加了96px的填充 - 足够的额外空间来包含背景图像。最后,它使用background-position来决定放置背景图像的位置;在底部。这减少了每个&#34;位置变量&#34;的耦合,这可能使其更容易更改。

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

我能得到的最好的:

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