Can't align vertically in div with inline Bootstrap buttons - css

Question

I wrote a small Angular directive that generates a step input control for numbers. I've used Bootstrap buttons (xs) for the inc/dec controls and somehow managed to simulate a fake focus on the outer container. The problem is centring vertically the spans and the input in a stable layout that keeps together when zoomed.
This is the directive template:
<ng-form name="stepNumberForm" novalidate \>
<div class="step-number"
tabindex="{{$id}}"
ng-class="{\'fake-focus\': fakeFocus}"
ng-keyup="keyControl($event)">
<span
ng-disabled="incDisable"
class="btn-primary"
ng-click="inc()">
<i class="glyphicon glyphicon-plus ">
</i>
</span>
<input type="text"
ng-style="setWidth()"
name="value"
ng-keyup="keyControl($event)"
ng-model="value"
ng-focus="selectAll($event)"
ng-blur="validate()"
class="input-xs">
<span
ng-disabled="decDisable"
class="btn-primary"
ng-click="dec()">
<i class="glyphicon glyphicon-minus">
</i>
</span>
</div>
</ng-form>
The CSS I've used is:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.step-number{
border:1px solid;
display:inline-block;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
border-radius:4px;
}
.input-xs {
font-size: 1em;
text-align: center;
border:none;
line-height: 1em;
height:1.1em;
vertical-align: middle;
}
.step-number span{
display: inline;
height: 100%;
width: 18px;
margin-bottom: 1px;
margin-top: 1px;
text-align: center;
}
.step-number span:first-child{
margin-left: 1px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.step-number span:last-child{
margin-right: 1px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.input-xs:focus{
outline:none;
}
.step-number:focus{
outline:none;
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}
.fake-focus{
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}
.step-date{
display: inline-block;
}
The whole project is available at github.
There is also a working demo and it's available for install through $ bower install stepper
I would greatly appreciate a helping hand from anybody finding this useful. All contributors are welcome to make this small directive look good. This means: input centred vertically, buttons centred vertically, a 1px border padding inside the element, cross-browser stable and zoom stable.

Answer 1

I've added these CSS rules at the span or the button element that has the + sign:
padding: 1px;
position: relative;
top: -1px;
It seems to be working just fine (I've also tried resizing the viewport - tested with Firefox).
Here is a screenshot of the outcome (remember, only applied to the plus sign)
You could add the above rules to a class .stepper-buttons and add it to the span or the button element (tested with both).
Let me know if this worked for you.