Check out the code in action at: https://jsfiddle.net/vwdhd1wy/4/
To vertically align two glyphicons and texts to the middle, you need to ensure consistent CSS styling. Add vertical-align: top; to all span elements to keep them aligned correctly. It's important to override any conflicting inherited styles from .glyphicon, such as line-height: 1 and top: 1px;. Update these with
div > span.glyphicon { line-height: 30px; top: 0px; }
along with setting
height: 30px; and
line-height: 30px;.
div > span {
display: inline-block;
vertical-align: top;
}
div > span, div > span.glyphicon {
height: 30px;
line-height: 30px;
top: 0px;
}
.left, .right {
background-color: red;
}
.middle {
background-color: grey;
}
To create a small gap between the text "thanks" and glyphicons, eliminate any whitespace after the span elements. This prevents extra space caused by treating inline elements as inline-block which includes spaces when rendering HTML.
Try this updated format:
<span class="left glyphicon glyphicon-forward"></span><span class="middle">Thanks</span><span class="right glyphicon glyphicon-backward"></span>