Search code examples
htmlcssalignment

Span element not aligning with button element?

I am trying to make a price calculator/converter for bitcoin.

I am using a span element for my input box, so it automatically resizes to the text. I have gotten all the javascript and backend code working, however i'm now just working on this UI.

Here's an example of my problem - 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>

How do I make the span box centered around the text, so it looks like one line?

Solution

  • You just need the two things on <span>:

    padding: 1px;
vertical-align: middle;

    And the last one on the button.

    .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>

    Preview

    preview