[FIXED] How can I vertically align a bootstrap glyph inside an <input> larger than default

Issue

I have to make an <input> that's larger than the usual. The height must be 55px. I am having trouble vertically aligning the glyph image inside the orange square. It looks like this:

It should look like this:

I have tried using margin-top on my <i> element but it moves the rectangle down too, I need to move just the glyph. It looks like this:

Please let me know if you have any ideas on how I could vertically center the glyph inside the orange box. I have setup a jsfiddle at https://jsfiddle.net/vteL375o/1/

HTML:

<div class="container">

  <div class="form-group has-feedback" style="margin-top:20px;">
    <input type="text" id="search-query" class="form-control not-rounded search-input">

    <i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i>
  </div>

</div>

CSS:

.not-rounded {
  border-radius: 0;
}

.search-input {
  font-size: 20px;
  margin-bottom: 50px;
  height: 55px;
}

.glyph-class {
  height: 55px;
  width: 55px;
  color:white;
  background-color: orange;
  font-size: 20px;
}

Solution

You can use Flexbox for this, or inline-flex in this case.

.not-rounded {
  border-radius: 0;
}
input.search-input {
  font-size: 20px;
  margin-bottom: 50px;
  height: 55px;
}

.glyphicon.glyphicon-search.form-control-feedback.glyph-class {
  height: 55px;
  width: 55px;
  color: white;
  background-color: orange;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="form-group has-feedback" style="margin-top:20px;">
    <input type="text" id="search-query" class="form-control not-rounded search-input">
    <i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i>
  </div>
</div>

Answered By - Nenad Vracar

Answer Checked By - Mary Flores (PHPFixing Volunteer)