Span元素与按钮元素不对齐？

Question

我正在尝试为比特币制作价格计算器/转换器。

我正在为输入框使用span元素，因此它会自动调整大小到文本。我已经获得了所有的javascript和后端代码，但是我现在正在使用这个UI。

以下是我的问题示例 - https://jsfiddle.net/0547g3be/

<div style="text-align:center;margin-top:45%">
<span id="output">
        <span contenteditable="true" class=leftseg></span><button class="rightseg" >USD</button>
        </span>
</div>

如何使跨度框以文本为中心，使其看起来像一行？

Answer 1

您只需要<span>上的两件事：

padding: 1px;
vertical-align: middle;

按钮上的最后一个。

.rightseg {
  text-decoration: none;
  border-radius: 0 .25em .25em 0;
  border-width: 1px;
  border-style: solid;
  border-color: #cccccc;
  margin-left: 0.75%;
  display: inline-block;
  height: 100%;
  padding-right: 2%;
  padding-left: 2%;
  font-family: "Open Sans";
  font-size: 150%;
  min-height: 35px;
  font-weight: 100;
  background-color: #f4f4f4;
  text-decoration: none;
  outline: 0 !important;
  box-shadow: none;
  vertical-align: middle;
}
.leftseg {
  text-decoration: none;
  border-radius: .25em 0 0 .25em;
  border-width: 1px;
  border-style: solid;
  border-color: #cccccc;
  margin-left: 0.75%;
  display: inline-block;
  height: 100%;
  padding-right: 0.5%;
  padding-left: 0.5%;
  font-family: "Open Sans";
  font-size: 150%;
  min-height: 35px;
  font-weight: 100;
  background-color: #f4f4f4;
  text-decoration: none;
  outline: 0 !important;
  box-shadow: none;
  min-width: 12.5%;
  padding: 1px;
  vertical-align: middle;
}

<div style="text-align:center;margin-top:45%">
  <span id="output">
    <span contenteditable="true" class=leftseg></span>
  <button class="rightseg" onfocus="if (!this.active) this.active = true; numFocus()" onmousedown="this.active = this.active || (doc.activeElement !== this)" onmouseup="var a = this.active; this.active = false; if (a) return false">USD</button>
  </span>
</div>

预览