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

时间：2019-04-07 03:01:03

标签： html css button

我有一个表单，在该表单中，我使用多个加号和减号按钮根据用户需要向表单添加新元素。我使用了自定义按钮样式。我已使用此站点获取必要的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;
    }
  }
}
.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;
}
<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>

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

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

Button Renderings

Additional Button renderings

5 个答案:

答案 0 :(得分：6)

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

TL; DR

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

字体如何工作

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

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

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

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

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

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

  • 基线是定义字符底部的行。除了某些例外，例如g和q字符不会超出基线。
  • 上限高度是定义大写字母顶部的线。这些通常是扁平字母，例如H或I，而O或A可能会过冲。
  • X高度是小写字母的高度。通常，这是字体中字母x的高度，即名称。
  • Ascender是小写字母的一部分，比字体的x高度高。考虑一下b和d字符。
  • 后缀是字母的一部分，在字体的基线下方延伸。我已经提到了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相同。这是显示这些值的屏幕截图：

Times New Roman font info

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

line-height和vertical-align

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

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

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

  

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

这是vertical-align的规格：

  

此属性会影响由内联级元素生成的框在框内的垂直位置。

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

确实

我已经在字体编辑软件中检查了+和-，看起来像这样：

Plus and Hyphen in Times New Roman

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

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

− (minus)的外观会有所不同吗？它肯定具有更多的对称性：

Plus and Minus in Times New Roman

在这里您可以更清楚地看到+和− (minus)更接近基线。

Flexboxes可能的解决方案？

让我们看一下flexbox。定义display: flex时，将生成一个名为flex container的框。 flex容器的流入子元素称为flex items，并放置在flex线内。

  

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

flex container and flex items

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

  

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

     

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

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

  

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

最后，if I understood the specification correctly，当您指定align-items: center时，基线是动态生成的，从而使您可以真正地将+和−居中。

总结

您应该使用弹性框并使用div，而不要使用button，因为button的行为似乎有所不同（我欢迎记录在案的建议，为什么）。即使您指定了巨大的数字（例如width和height至400px和font-size至750px），您也会看到向底部的轻微移动。但是在小尺寸上，一切似乎都可以正常工作。

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

来源，我进行了研究：

用于显示字体信息的应用-https://fontforge.github.io/en-US/

答案 1 :(得分：2)

我认为这可能是由于按钮元素本身造成的：

在将+放在单独的跨度内并将跨度完美对准中心时，
通过使用flexbox， +仍然不完全在中心。当我对div元素执行相同操作时，
+恰好居中居中。

检查this fiddle以了解我的意思。
因此，我建议使用带有click事件而不是按钮的div。

另外，如果您想让负号与加号的高度垂直对齐，
您应该在元素内使用&minus;而不是-。

答案 2 :(得分：1)

您需要在.pmbutton中指定字体系列，

您可以选择广泛使用的web safe字体，也可以声明自己的font-face 

.pmbutton {
   font-family:arial;
}

答案 3 :(得分：1)

也许您可以代替硬编码的height和width，而使用padding作为间距。如果font-size是10px，则只需给出它是4px

的填充

答案 4 :(得分：0)

据我了解，您需要将价值观置于中心位置 根据您上面发布的HTML代码 除非执行以下操作，否则不能将文本置于居中位置：

<td class = "test" align = "center">+<td>

您应该使用align =“ center”来使文本位于中心位置，并且不要为此使用CSS，仅按上述方式使用它是行不通的 现在您需要将文本垂直放置在中心位置 此步骤可以通过CSS

完成 
.test { padding-top = 2px; padding-bottom = 2px;}

如上所述，CSS垂直位置通过填充进行调整。

另一种方法（不适用于HTML5）

在标签内使用跨度

<td class ="test"><span>+</span></td>

然后使用CSS 

.test > span { padding-top = 2px; padding-bottom = 2px; padding-right = 2px padding-left = 2px;}

更新

如果您询问有关Mac OS和iPhone的问题，也请重置此设备，所以这里是我的建议 不要在这些设备上使用td标签，它们将无法正常工作，这与应用程序开发有关，而不是针对设备本身。如果您在iPhone上使用Firefox，则可能会正常工作 因此，使用这种类型的标签 例子

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

dt优于td

原因：

此行为的可能原因 我四处搜索，并问一些朋友，为什么某些浏览器可能会发生这种情况，而其他浏览器却没有呢？ 我得到了这个结论：

这是因为有时Safari webview会自动缩放文本，因为它是个好主意。

要禁用此功能，请使用以下CSS样式：

-webkit-text-size-adjust:none;

现在，您的字符应该不间断显示。

相关问题
最新问题