Question

我有以下codepen： https://codepen.io/ftahir192/pen/paeYzV

codepen包含重写流行的Select2插件的样式。

我在使用搜索框垂直对齐搜索图标和搜索输入时遇到了一些问题。正如您在codepen中看到的那样，搜索图标会略微推到顶部，搜索文本虽然看起来像是在中心，但在更改字体大小时效果不佳。

我一直试图解决这个问题几个小时，但我很遗憾为什么我无法获得vertical-align: middle;或添加一些margin-top / padding-top来修复错误。理想情况下，我正在努力使搜索文本的图标和相互响应，即一个垂直对齐或边距属性，与整个select2搜索类对齐。

我相信css中的以下代码是罪魁祸首：

.select2-search {
  font-size: $search-box-font-size;
  font-weight: bold; 
  vertical-align: middle;

任何帮助将不胜感激！

Answer 1

我认为这可能是您正在寻找的，让您开始使用flexbox。您可以通过将以下css添加到搜索栏来实现垂直对齐：

.select2-container--bgform .select2-search {
    display: flex;
    align-items: center;
}

这样做是将每个子元素垂直对齐到.select2-search元素的垂直中心。您可以在此处阅读更多内容：A Complete Guide to Flexbox。

此外，这里是flex的caniuse.com页面。

- 如果没有flexbox，您可能需要考虑一下这篇文章：CSS vertical alignment without flexbox和他们的example。大概是这样的：

  .select2-search {
    position: relative;
    display: block;
    height: 100%;

    &::before,
    .select2-search__field {
      display: inline-block;
      vertical-align: middle;
      text-align: middle;
      margin: 0 0 2px;
    }
  }

Answer 2

我无法在IE中尝试，但在Chrome中，通过将这些行添加到CSS代码中，它对我有用：

.select2-search__field {
  height: $search-box-height - 2;
  margin-top: 0 !important;
  font-size: $search-box-font-size;
  width: calc(100% - 41px) !important;
  padding-top: 2px !important;
}

.select2-container--bgform .select2-search:before {
  line-height: $search-box-height - 2;
  vertical-align: top;
}

或点击Codepen。

垂直对齐容器内的输入框

2 个答案: