【问题标题】:align text to top of a button without using a span inside it将文本与按钮顶部对齐,而不在其中使用跨度
【发布时间】:2014-03-10 05:49:44
【问题描述】:

我想将文本垂直对齐到按钮的顶部,但我不想在按钮内使用任何 span 或 div。我该怎么做? vertical-align:top 没有帮助

按钮内的文本将是多行的,它不是固定的。文本的长度可以变化....它可以只占据第一行或多行..所以我无法修复一些填充

【问题讨论】:

  • 你试过padding-top:0px;吗?

标签: html css button text vertical-alignment


【解决方案1】:

将按钮的padding-bottom 设置为75%。这会将文本向上推。

【讨论】:

    【解决方案2】:

    如果您想让某些东西粘在顶部,您只需向按钮添加内边距,然后去掉按钮顶部的内边距即可。

    .btn { padding: 10px; padding-top: 0px;}
    

    这里是一个例子:http://jsfiddle.net/LJ3NL/

    【讨论】:

      【解决方案3】:

      您可以将line-height 设置为button,而不是设置padding-bottom。这会将文本垂直对齐到顶部。

      【讨论】:

      • 将line-height 设置为什么?
      • 将 line-height 设置为 button 以移除 button 中的顶部间距
      【解决方案4】:

      试试这个

      <input type="button" class="button" value="button" />
      

      CSS:

      .button {
          background: #000000;
          color: #FFF;
          padding-bottom:60px;
          height:100px;
          }
      

      DEMO

      【讨论】:

      • 所有多余的样式是怎么回事?
      【解决方案5】:

      请这个 css 试试看

        input {height:auto; padding-bottom:30px; }
      

      【讨论】:

        猜你喜欢
        • 2016-06-07
        • 2012-01-03
        • 2013-04-21
        • 1970-01-01
        • 1970-01-01
        • 2019-08-07
        • 2015-02-12
        • 2020-09-06
        • 1970-01-01
        相关资源
        最近更新 更多