那不是Arial。

Question

我正在创建一个css主题引擎，我遇到的一个问题是不同字体的垂直高度问题。我在线阅读了很多文章，所有解决了特定字体系列的解决方案。但在我的主题引擎中，用户可以使用许多字体作为选择。对齐图标和标签时，此垂直高度问题非常痛苦。所以我想知道是否有办法实现这一目标。

我在jsFiddle中创建了一个示例代码，请使用此网址jsfiddle

进行检查

// html
<button id="arial">
 arial
</button>

<button id="tahoma">
 helvetica
</button>

// css
#arial {
  font-family: airal;
  font-size: 1em;
  padding: 5px 10px;
}

#tahoma {
  font-family: Tahoma;
  font-size: 1em;
  padding: 5px 10px;
}

因为您可以看到我使用了arial和tahoma（请不要介意按钮文字）。您可以看到文本定位和顶部和底部的空间如何变化。像素值不是网络像素值我只是缩放图像并在photoshop中获得维度以显示差异。

Answer 1

尝试使用Optional<String>属性。

public static Optional<String> searchCoutryCode(String countryName) {
   ...
}

我将line-height button { line-height:26px; vertical-align:middle; }设置为body以确保两个字体系列具有相同的大小 - 具体取决于浏览器font-size可能不同 - 并删除了垂直从按钮填充并使用+ 10px的正文字体大小的行高来获得相同的结果。

奖金提示（已修改）：16px 不能不应与1em元素一起使用，只需在那里使用高度 - 详细信息小提琴。

https://jsfiddle.net/5j4L2tpj/

原因是因为在某些浏览器中 - 例如iOS的Safari - 文本的垂直对齐混乱了。简单line-height属性按预期工作，垂直对齐文本 - 在这种情况下不需要垂直input。总而言之，只需在输入上使用height，不使用padding或纵向height，并按预期完成所有浏览器/设备的工作。

PS你有line-height字体系列的拼写错误。

Answer 2

如何使用flex？

    button {
        display: flex;
        align-items: center;
    }

检查flex

的跨浏览器前缀

Answer 3

这是一个解决方案：

else

检查更新后的小提琴：https://jsfiddle.net/upb7cL5g/4/

Answer 4

如果我理解正确你当前正在使用填充/边距来垂直对齐元素（在你的案例文本中），那么如果高度改变，位置也会随着计算距离而改变，所以你需要一个自动居中的解决方案本身通过计算高度。这就是我的理解。我想你需要像top : calc(50% - 10px);

这样的东西

这是一个JSFiddle https://jsfiddle.net/xnjq1t22/

此链接包含更多黑客，可以垂直对齐项目http://jsfiddle.net/techsin/FAwku/1/

Answer 5

那不是Arial。

你有（在小提琴中）表示 airal 的字体系列，它不存在，并被可能的Times Roman取代。默认大小（至少在我的Firefox 57上）似乎与我不同。一旦你确定所涉及的实际字体，我会尝试重现这个问题。

修复多种字体

5 个答案:

那不是Arial。