【问题标题】:How align center text in custom buttons?如何在自定义按钮中对齐中心文本?
【发布时间】:2013-05-16 01:47:21
【问题描述】:

我有这个 html

<head>
<title>HTML5 App</title>

<link rel="stylesheet" type="text/css" href="css/custom.css"> 
<link rel="stylesheet" type="text/css" href="css/buttons.css"> 

</head>

<body>
<!--Estructura -->


<div id="botones">
    <button class="btn" data-am-type="button">Soy un &lt;button&gt;</button>
    <a class="btn" data-am-type="button">Soy un &lt;a&gt;</a>
    <div class="btn" data-am-type="button">Soy un &lt;div&gt;</div>
    <input class="btn" type="button" value="Soy un <input>">
</div>

</body>

【问题讨论】:

标签: html css


【解决方案1】:

请删除 padding:4px 12px; 来自 .btn 类 并设置 line-height: 根据您的要求,文本将出现在框的中心。

【讨论】:

    【解决方案2】:

    应该是,简单地说:line-height: 0.25em;

    【讨论】:

      【解决方案3】:
      border: none;
      outline: 0;
      cursor: pointer;
      text-decoration: none;
      overflow: visible;
      background: none;
      padding:0 16px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      color: #222
      

      希望对你有帮助

      【讨论】:

        【解决方案4】:
        vertical-align:center;
        

        使用它,它会起作用

        【讨论】:

          【解决方案5】:

          我认为通过为a 元素设置填充来创建高度。

          【讨论】:

            【解决方案6】:

            删除这个:height: 80px;

            您的填充:padding: 4px 12px;

            删除后的高度填充必须是~padding: 30px 12px;

            您必须正确设置填充(基于您的文本高度)。

            【讨论】:

              【解决方案7】:

              为 .btn 类添加 display:table-cell;

              喜欢

              .btn{display:table-cell;}
              

              这将为Div 以及具有类.btn 的a 元素创建垂直对齐。 希望这会有所帮助。

              【讨论】:

              • IE7 或更低? IE7 或更低版本不支持标签按钮本身。可能你忘了提到这一点。正确的? - @chalist
              • 你也忽略了sn-p的一个重要点。即标题标签。它提到了HTML5 App。 HTML5。您可以写信给提出此问题的用户并说“IE7 或更低版本不支持”。正确的? - @chalist
              【解决方案8】:

              要使这些元素的文本垂直居中,只需将元素文本的line-height 设置为等于元素的height,并将box-sizing 设置为border-box(以便height所有元素都相同:

              .btn {
                  /* other, unchanged, CSS */
                  line-height: 80px; /* <- changed this */
                  box-sizing: border-box; /* <- added this */
              }
              

              JS Fiddle demo.

              如果文本换行到第二行,这显然会导致问题。

              【讨论】:

                猜你喜欢
                相关资源
                最近更新 更多
                热门标签