Question

我正在尝试使用按钮外观创建一个元素。我创建了一个.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 - padding 86px。但是继承的高度不是重新生成的高度，而是应用于父50px的实际高度。这很奇怪而且不一致。文字似乎垂直对齐，但略有偏差。跨度溢出.button。

我可以移除box-sizing: border-box;上的.button以解决此问题，并获得完美对齐的按钮文字和漂亮的按钮，但填充和边框将添加到宽度和高度我说明了。如果我想要一个100x50像素的按钮，我将获得100 +边框+填充x 50 +边框+填充像素按钮，但是垂直对齐的按钮：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上的upvote按钮。}

Answer 1

您可以使用flexbox实现此目的。

  display: inline-flex;
  justify-content: center;
  align-items: center;

<强> jsFiddle

CODE SNIPPET

.button {
  overflow: hidden;
  white-space: nowrap;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
  font-family: Arial;
  font-size: 13px;
  color: black;
  text-decoration: none;
  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=);
}
body > * {
  width: 100px;
  height: 50px;
}

<input type="button" value="input">

<a href="#" class="button">anchor</a>

<p class="button">paragraph</p>

修改

从语义上讲，我宁愿使用data-attribute来提供有关HTML元素中行为更改的额外信息。

以下是使用第四级选择器允许在属性值中进行大小写排列的示例:(您可以从选择器中删除i，因为在所有现代浏览器中可能都不支持它。）

DEMO

[data-type="button" i] { overflow: hidden; white-space: nowrap; display: inline-flex; justify-content: center; align-items: center; -webkit-user-select: none; font-family: Arial; font-size: 13px; color: black; text-decoration: none; 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; } [data-type="button" i]: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); } [data-type="button" i]: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=); } body > * { width: 100px; height: 50px; }

<input type="button" value="input"> <a href="#" data-type="button">anchor</a> <p data-type="BuTToN">paragraph</p>

Answer 2

由于看起来你使用的是恒定的字体大小，你可以用一点calc魔法和绝对定位来做到这一点：

.button span {
  display:block;
  left:0;
  right:0;
  position:absolute;
  top:calc(50% - 9px);
  text-align:center;
}

三个不同按钮高度的示例：https://jsfiddle.net/tLhr3ju3/1/

模仿按钮外观和行为

2 个答案: