【发布时间】：2016-12-28 08:01:30
【问题描述】：
我正在尝试创建一个具有按钮外观的元素。我创建了一个.button 类来应用效果。我设法模仿了基本样式（边框、背景渐变、悬停和活动效果）。如果按钮有高度，问题是按钮文本的垂直对齐方式。
如果我没有在元素上指定高度，则不需要垂直对齐，我会得到想要的结果：JSFiddle。
但是，如果我在元素上指定高度，则元素的大小（高度）会增加，并且文本会保持在顶部：JSFiddle。
为了将文本垂直对齐到中心/中间，我在按钮元素内添加了一个跨度并修改了跨度。
.button span {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
但这不起作用。即使父 .button 指定了宽度和高度，span 也不会得到这些值：JSFiddle。
为了解决这个问题，我将跨度的宽度和高度设置为inherit。这在一定程度上解决了问题，但导致了另一个问题：JSFiddle。
继承的宽度是剩余空间，因为 box-sizing: border-box; 应用于父 .button 。换句话说，width = 100px - border - padding86px。但是继承的高度不是remaing高度，而是应用到父50px的实际高度。这是奇怪和不一致的。文本似乎垂直对齐，但略有偏离。跨度也溢出.button。
我可以删除.button 上的box-sizing: border-box; 来解决此问题，并获得完美对齐的按钮文本和漂亮的按钮，但填充和边框将添加到我指定的宽度和高度。如果我想要一个 100x50 像素的按钮，我会得到 100+border+padding x 50+border+padding 像素的按钮，但是垂直对齐的按钮：JSFiddle。
有没有其他方法可以做到这一点？
.button {
overflow: hidden;
white-space: nowrap;
display: inline-block;
vertical-align: top;
-webkit-user-select: none;
font-family: Arial;
font-size: 13px;
color: black;
text-decoration: none;
text-align: center;
cursor: default;
padding: 2px 6px;
margin: 0;
/* box-sizing: border-box; */
border-radius: 2px;
border-top: 1px solid rgb(166,166,166);
border-bottom: 1px solid rgb(148,148,148);
border-left: 1px solid rgb(157,157,157);
border-right: 1px solid rgb(157,157,157);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAAAAACFNooQAAAAHUlEQVQI12P4wfSfiYHpP9N/KP0Pyv6Pxobw4CoBqcYYFT1E4a0AAAAASUVORK5CYII=);
background-size: contain;
}
.button:hover {
border-top: 1px solid rgb(123,123,123);
border-bottom: 1px solid rgb(110,110,110);
border-left: 1px solid rgb(116,116,116);
border-right: 1px solid rgb(116,116,116);
}
.button:active {
border-top: 1px solid rgb(166,166,166);
border-bottom: 1px solid rgb(148,148,148);
border-left: 1px solid rgb(157,157,157);
border-right: 1px solid rgb(157,157,157);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAAAAACFNooQAAAAHUlEQVQI12O4y8TIxMDEyMQIpZmgbAhkQmPDVQIAOFkBLhpTdQIAAAAASUVORK5CYII=);
}
.button span {
width: inherit;
height: inherit;
display: table-cell;
vertical-align: middle;
}
body > * {
width: 100px;
height: 50px;
}<input type="button" style="width: 150px; height: 50px" value="input">
<a href="#" class="button">anchor</a>
<a href="#" class="button"><span>a > span</span></a>
<p class="button">paragraph</p>更新：我忘了提。我无法在跨度上设置行高。如果我有多个高度可变的按钮，我需要对所有按钮应用不同的行高。
我正在寻找一种更通用的解决方案，它可以使元素像按钮一样工作（指定或不指定宽度/高度）。
我想打破this上的点赞按钮。
【问题讨论】：
标签： html css button vertical-alignment