按钮文字换行：垂直对齐问题
Posted
技术标签:
【中文标题】按钮文字换行：垂直对齐问题【英文标题】：Button text wrap: vertical alignment issue 【发布时间】：2012-02-01 15:58:22 【问题描述】：我需要在我的按钮内换行，所以我找到了这个解决方案：
How to wrap text of html button with fixed width
但是，在应用解决方案后，我注意到按钮的垂直对齐方式发生了变化。这是截图：
代码如下：
<html>
<head>
<title>Button Wrap</title>
<style type="text/css">
INPUT.StandardButton
WIDTH: 87px;
HEIGHT: 38px;
font-size: 10pt;
Font-weight: bold;
cursor: pointer;
FONT-FAMILY: Arial, Verdana;
COLOR: #0049A5;
</style>
<head>
<body>
<input type="button" value="NoWrap" class="StandardButton" />
<input type="button" value="This is Test 1" class="StandardButton" style="white-space: normal;" />
<input type="button" value="This is Test 2" class="StandardButton" style="white-space: normal;" />
<input type="button" value="This is Test 3" class="StandardButton" style="white-space: normal;" />
</body>
</html>
知道是什么导致了对齐变化吗？谢谢！
【问题讨论】：
【参考方案1】：我不确定是什么导致了这种错位，但显然vertical-align:middle 似乎可以解决它：
http://jsfiddle.net/ptriek/Dr5hM/
【讨论】：
在 chrome 中，按钮上的空白属性设置为 pre，因此设置为正常的框似乎是唯一显示此问题的框。这很奇怪。 垂直对齐确实解决了这个问题。谢谢！ 抱歉更新这么快，但我只是注意到添加vertical-align:middle 将删除IE9 中的文本换行。但是在 Chrome 中运行良好。有什么想法吗？ OK，对比一下JSFiddle和我的html的区别，发现需要将DOCTYPE设置为 即使使用 我也遇到了同样的问题，但vertical-align 仍然为我解决了这个问题。非常感谢！【参考方案2】：
也不确定是什么原因造成的，但 valign 将按钮放在一个表格中，我们缩短按钮宽度应该很快就能解决这个问题。
【讨论】：
以上是关于按钮文字换行：垂直对齐问题的主要内容，如果未能解决你的问题，请参考以下文章