在按钮内定位文本答案

【问题标题】：Positioning text inside a button在按钮内定位文本
【发布时间】：2023-03-19 01:58:01
【问题描述】：

我的按钮上有文字，上面有太多空间。看起来像这样：

如何将文本定位得更高一点，以免被按钮的边框切割？

HTML：

<input type="button" value="a">

到目前为止，这是我的 CSS：

input[type="button"], input[type="submit"] {
  min-width: 40px;
  height: 25px;
  font-size: 30px;
  color: #ffffff;
  margin-right: 10px;
  padding: 0px;
}

line-height 属性不会改变任何东西，即使使用了!important。

【问题讨论】：

但是 line-height 是你想要的。 ;) 使用比你的字体大小更小的值。
我认为 lineheight 是我想要的，但我想要这么大的字体和这么小的按钮。有没有办法从按钮中独立移动文本？
您可以拥有font-size: 30px;，然后例如line-height: 20px;。玩一会儿。这应该有效。

标签： html css text fonts positioning

【解决方案1】：

设置固定高度会导致对齐失败。设置字体大小足以让 div 自动调整大小并且文本将居中。试试这个新的 CSS：

input[type="button"], input[type="submit"] {
  min-width: 40px;
  font-size: 30px;
  color: #ffffff;
  margin-right: 10px;
}

【讨论】：

【解决方案2】：

如果您真的想保留按钮的固定宽度和高度以及文本的字体大小，那么您可以执行以下操作。这是将文本放在不同的 div 中，以便您可以将其放置在按钮的顶部。如果按钮是位置：相对，文本 div 是位置：绝对，并且 HTML 的结构是文本 div 在按钮标签内，那么它将很好地分层。此外，以这种方式完成后，文本将与按钮一起移动并且不会被移位（如果说你给按钮一个边距：100px）。

<button value="">
    <div id="buttonText">a</div>
</button>

Here is my CSS so far:

<style>
button {
    width: 40px;
    height: 25px;
    margin-right: 10px;
    position: relative;
}

#buttonText
{
    font-size: 30px;
    position: absolute;
    top: -9px;
    left: 9px;
    color: #FFF;
}
</style>

【讨论】：