自定义按钮中的文本随机不垂直居中

Question

自定义按钮中的文本随机不垂直居中

我有一个表单，在该表单中，我使用多个加号和减号按钮将新元素添加到用户需要的表单中。我使用了自定义按钮样式。我已使用此站点获取必要的CSS，以确保文本居中。但这似乎仅在按钮的某些情况下有效。

function unhide(id) {
  var myForm = document.forms.mrform;
  var myControls = myForm.elements[id.concat('[]')];
  for (var i = 0; i < myControls.length; i++) {
    var aControl = myControls[i];
    if ($(aControl).is(':hidden')) {
      $("#".concat(id.concat(i+1).replace(/ /g, "_"))).show();
	  break;
    }
  }
}

function hide(id) {
  var myForm = document.forms.mrform;
  var myControls = myForm.elements[id.concat('[]')];
  for (var i = myControls.length; i > 0 ; i--) {
    var aControl = myControls[i];
    if ($(aControl).is(':visible')) {
      $("#".concat(id.concat(i+1).replace(/ /g, "_"))).hide();
	  break;
    }
  }
}

Run Code Online (Sandbox Code Playgroud)

.pmbutton {
  background-color: greenyellow;
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  height: 17px;
  width: 17px;
  padding: 0px;
  margin: 0px 0px 0px 4px;
  vertical-align: middle;
  line-height: 17px;
  box-sizing: border-box;
}

.hideme {
  display: none;
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='mrform' action='report_generator.php' method='post' autocomplete='off' onkeypress='return event.keyCode != 13;'>
<table class='subform'>
  <tr id='Objective_Item1'><td class='prompt text'>Objective Item #1 :</td><td class='input'><input class='inputbox text' type='text' name='Objective Item[]'><button type='button' class='pmbutton' onclick='unhide("Objective Item")'>+</button><button type='button' class='pmbutton' onclick='hide("Objective Item")'>-</button></td></tr>
  <tr id='Objective_Item2' class='hideme'><td class='prompt text'>Objective Item #2 :</td><td class='input'><input class='inputbox text' type='text' name='Objective Item[]'></td></tr>
  <tr id='Objective_Item3' class='hideme'><td class='prompt text'>Objective Item #3 :</td><td class='input'><input class='inputbox text' type='text' name='Objective Item[]'></td></tr>
  <tr id='Objective_Item4' class='hideme'><td class='prompt text'>Objective Item #4 :</td><td class='input'><input class='inputbox text' type='text' name='Objective Item[]'></td></tr>
  <tr id='Objective_Item5' class='hideme'><td class='prompt text'>Objective Item #5 :</td><td class='input'><input class='inputbox text' type='text' name='Objective Item[]'></td></tr>
  <tr id='Objective_Item6' class='hideme'><td class='prompt text'>Objective Item #6 :</td><td class='input'><input class='inputbox text' type='text' name='Objective Item[]'></td></tr>
  <tr id='Objective_Item7' class='hideme'><td class='prompt text'>Objective Item #7 :</td><td class='input'><input class='inputbox text' type='text' name='Objective Item[]'></td></tr>
  <tr id='Objective_Item8' class='hideme'><td class='prompt text'>Objective Item #8 :</td><td class='input'><input class='inputbox text' type='text' name='Objective Item[]'></td></tr>
  <tr id='Objective_Item9' class='hideme'><td class='prompt text'>Objective Item #9 :</td><td class='input'><input class='inputbox text' type='text' name='Objective Item[]'></td></tr>
  <tr id='Objective_Item10' class='hideme'><td class='prompt text'>Objective Item #10 :</td><td class='input'><input class='inputbox text' type='text' name='Objective Item[]'></td></tr>
</table>
</form>

Run Code Online (Sandbox Code Playgroud)

该功能很好，但在某些情况下文本不在按钮中垂直居中，而在其他情况下则为IS。似乎是随机按钮中的单个像素关闭。我已经在Firefox和Chrome浏览器中查看了它（似乎更糟）。关于原因有什么建议吗？

编辑：在网站的一页上添加同一按钮的多个渲染图像。我在其中一些之间更改的唯一属性是背景色。似乎垂直和水平对齐方式都不同。

Answer 1

Ale*_*hin 6

在你读之前。我不是字体专业人士，我根据我对该主题的几个小时研究得出了答案。在某些地方我可能是错的，我很乐意接受答案的任何改进。

TL; DR

我认为，最安全的方法是创建+和的图像，并将?其用作按钮。

字体如何工作

要回答您的问题，您需要先了解字体的工作原理。

字体中的每个字符都适合其自己的空间容器。在传统的金属类型中，此容器是每个字符的实际金属块。每个字符的高度均一，可以将字符整齐地设置成行和块。此空间称为“ em-space”，它起源于大写M字符的宽度。这样做是为了使这封信的比例成正比。

在数字类型中，em-space的定义如下：

在OpenType字体中，通常设置为1000个单位。
按照惯例，在TrueType字体中，它是2的幂，通常设置为1024或2048个单位。

使用字体设置字体时，em会缩放到所需的磅值。

字体中的每个字符还具有以下元素：

基线是定义字符底部的线。除了某些例外，像g和q字符不会超出基线。
封顶高度是定义大写字母顶部的线。这些通常是扁平字母，例如H或I，而O或A可能会过冲。
X高度是小写字母的高度。通常，这是x字体中字母的高度，即名称的高度。
升序是小写字母的一部分，比字体的x高度高。想想b和d人物。
Descender是字母的一部分，在字体的基线下方延伸。我已经提到g和q。

所有这些元素都包含在em-space中。

现在，当您尝试将字体缩小到10px时会发生什么（根据您的font-size: 10px;设置）。除非您更改了浏览器设置，否则浏览器的默认字体大小为16px（对于您似乎使用的Times New Roman，1 em = 2048单位）。

但是Times New Roman使用1825上升和443下降，这在Windows上以2048个单位的em-square生成2268个单位。Mac似乎使用的HHead值与Times New Roman相同。这是显示这些值的屏幕截图：

这是什么意思？这意味着，当您指定font-size: 10pxTimes New Roman的实际大小时，将完全不同。如果我的计算正确，它将11.07421875四舍五入为11px（已经是“ ouch”，对吧？）

line-height 和 vertical-align

好的，接下来，当您button在屏幕上呈现您的图像时，根据其宽度，它可以由多行组成。每行由一个或多个行内元素（例如，span具有不同字体设置的元素）组成，称为行框。线盒的高度取决于其子代的高度。浏览器计算每个内联元素的高度，并选择最高的子级作为行框的“模板”。这样可以确保在渲染元素时在屏幕上看到所有字符。

此行为不同于Word或Photoshop。在那些程序中，line-height不是基于行框的。相反，它是基线之间的距离。但是在CSS中却不是。在CSS中，您line-height就是您的线路框。

应该注意的是，CSS没有指定默认值line-height。默认值为normal：

告诉用户代理根据元素的字体将使用的值设置为“合理”的值。该值与的含义相同。我们建议“正常”的使用值介于1.0到1.2之间。计算值是“正常”。

这是以下的规格vertical-align：

此属性影响由inline-level元素生成的框的线框内的垂直位置。

根据以上所有信息，我们可以得出结论，这是内容区域垂直居中，而不是纯粹的字符。

确实

我已经检查+并使用-了字体编辑软件，它看起来像这样：

虽然+看起来很对称，但它在内容区域内仍然降低了一些；并-降低至基线。因此，答案-很明显。根据我上面研究和发布的所有内容-您将无法使其垂直居中，但始终会稍低。在较小的字体上，它可能是一两个像素。如果字体很大，您会立即看到它。

请注意，-您习惯于键入（数字键盘右上角的键；或键的右键0）不是负号，而是hyphen。减号和连字符的外观有所不同：?vs -。

会? (minus)另眼相看？它肯定具有更多的对称性：

在这里，您可以更清楚地看到这一点，+并且? (minus)更接近基线。

Flexboxs可能的解决方案？

让我们看一下flexbox。定义时display: flex，将生成一个名为的框flex container。将调用flex容器的流入子项，flex items并将其布置在flex线内。

与块和内联布局不同，其布局计算偏向于块和内联流方向，而柔性布局偏向于挠曲方向。

现在，除了线框外，柔性线的工作方式也有所不同：

内容分成几行后，每一行都会独立布置；灵活的长度以及justify-content和align-self属性仅一次考虑单行中的项目。

在多行flex容器中（甚至只有一条行），每行的交叉尺寸是在该行上包含flex项所需的最小尺寸（由于align-self对齐后）。在flex容器内使用align-content属性对齐。在单行flex容器中，线的交叉尺寸是flex容器的交叉尺寸，而align-content无效。行的主要尺寸始终与flex容器的内容框的主要尺寸相同。

因此，当您定义时align-items: center，

弹性项目的边距框位于行内交叉轴的中心。

最后，如果我正确理解了规范，则当您指定时align-items: center，基线是动态生成的，从而使您可以完美地将+and 居中?。

结论

您应该使用flexboxes并使用div，而不是button，因为button行为似乎有所不同（我欢迎记录在案的建议为什么）。即使您指定了巨大的数字（例如width和以及heightto 400px和font-sizeto 750px），您也会看到向底部的轻微变化。但是，在小尺寸上，所有功能似乎都能完美运行。

我认为，最安全的方法是创建+和的图像，并将?其用作按钮。

来源我研究：

应用显示字体信息-https: //fontforge.github.io/zh-CN/

除此之外，当使用“加号”字符时，其相反是“减号”，而不是“连字符”。大多数字体中的正号和负号会更好地垂直对齐。 (2认同)

归档时间：	6 年，5 月前
查看次数：	211 次
最近记录：	6 年，4 月前