我怎样才能在比默认大的 <input> 内垂直对齐 bootstrap 字形

Question

我必须制作一个比平常更大的 <input>。高度必须为 55px。我在垂直对齐橙色方块内的字形图像时遇到问题。它看起来像这样：

它应该是这样的：

我已经尝试在我的 <i> 元素上使用 margin-top 但它也将矩形向下移动，我只需要移动字形。它看起来像这样：

如果您对如何使橙色框内的字形垂直居中有任何想法，请告诉我。 我在 https://jsfiddle.net/vteL375o/1/

设置了一个 jsfiddle

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;
}

Answer 1

将 line-height: 55px; 添加到 .glyph-class。

input.not-rounded {
  border-radius: 0;
}
input.search-input {
  font-size: 20px;
  margin-bottom: 50px;
  height: 55px;
}
i.glyph-class {
  height: 55px;
  width: 55px;
  color: white;
  background-color: orange;
  font-size: 20px;
  line-height: 55px;
}

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

Answer 2

您可以为此使用 Flexbox，或者在这种情况下使用 inline-flex。

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

Answer 3

只需将 padding: 10px 0; 添加到您的 .glyph-class

像这样

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

这是运行示例：https://jsfiddle.net/vteL375o/6/

我怎样才能在比默认大的 <input> 内垂直对齐 bootstrap 字形

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

html

css

vertical-alignment

twitter-bootstrap