代码之家 › 专栏 › 技术社区 › CairoCoder

在中间垂直对齐按钮值

vertical-alignment alignment button css

CairoCoder · 技术社区 · 5 年前

我有一个值设置为“*”的按钮。

<button class="testButton" value="*">*</button>

我需要在中间垂直对齐它的值。

我尝试过以下方法,但没有成功:

.testButton {
  display: inline-flex;
  align-items: center; 
}

填充工作正常,但我认为这不是最佳实践。

我已经复习了其他问题,没有任何线索。

2 回复 | 直到 5 年前

aloisdg 5 年前

它是居中的。问题来自字符星号。使用“*”以外的东西。例如,您将遇到与“__”相同的问题。

button {
  font: monospace;
  height: 100px;
}

<button type="button">*</button>
<button type="button">â</button>
<button type="button">â</button>

Henfs 5 年前

实际上,您的“*”已经集中了。特别是这个字符比其他字符略高。这也取决于 font-family . 你可以通过在上面添加一些常规文本来证明这一点。你可以加一些 padding-top 为了修复这个视觉细节。另外,我建议您添加一些 height 以改善其外观。

推荐文章

William Entriken · 排列不同尺寸的徽章

7 年前

user438461 · 在我的WPF选项卡项中设置VerticalContentAlignment会更改选项卡中的文本和选项卡中包含的控件

7 年前

SmallSani · 当更改内容时,如何在页面上垂直居中放置div?

7 年前

Benji · -webkit背景剪辑:文本和垂直居中文本

7 年前

Travis Martin · flexbox布局中的垂直文本

7 年前

Mike Waldrup · 弹性物品被撞倒,正好是前一件物品的一半高度

7 年前

karlo1zg · 垂直对齐输入元素中间的浮动标签

7 年前

Ahmed Elashker · Xamarin在平台垂直选项上形成XAML

7 年前

coreysimons · 动态布局中的图像对齐

7 年前

Théo Clayette · 设置垂直Android工具栏

7 年前