html – 如何在文本中心对齐不均匀的图标？

<div class="navbarheader">
    <div class="header-left">
        <button type="button" class="pull-left btn-nav-menu">
            <i class="navbar-text fa fa-fw fa-navicon"></i>
        </button>
        <button type="button" class="pull-left" ng-click="ui.showSearch()">
            <i class="navbar-text fa fa-fw fa-search"></i>
        </button>
    </div>
    <div class="header-title">
        <div class="navbar-brand">{{ui.headertitlE}}</div>
    </div>
    <div class="header-right">
        <button class="btn-watchlist pull-right" ng-click="ui.toggleWatchlists()">
            <i class="navbar-text fa fa-fw fa-binoculars"></i>
        </button>
    </div>
</div>

.navbarheader {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.navbarheader .header-left {
  margin-left: -0.5rem;
}
.navbarheader .header-title {
  flex-grow: 2;
  text-align: center;
}
.navbarheader .header-right {
  margin-right: -0.5rem;
}

你需要确保.header-right和.header-left对.header-title施加相同的“flex”压力.它们的柔韧生长,弯曲收缩和柔性基础需要相等.默认情况下,它们有flex：0 1 auto;所以你不必担心flex-grow [0]和flex-shrink [1].

但是,您需要将auto更改为实用值(浏览器在px中可翻译的任何内容：％,px,em,rem,…),大于50％(如果设置flex-,则可以低于50％增长：1;在.header-left和.header-right上 – 只记得让它们相等).

你的标题即使会产生0的弹性基础,也会从左右宽度上同等地增加.当然,你需要确保它始终保持在1行,方法是添加white-space：nowrap到它(如果它真的很长并且你认为它应该包裹在一些非常狭窄的屏幕上,将空格规则放在@media查询中另外,记得在允许它包装时给你的.header-title足够的flex-basis,所以它不会包含太多的行 – 如果你的总flex-basis大于100％,请不要担心,所有如果父级的flex-wrap设置为nowrap,浏览器将按比例缩小所有元素.

如果您更喜欢CSS到英语,请输入以下代码：

.navbarheader {
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.header-right,.header-left {
  flex-basis: 50%;
}
.header-right {
  text-align: right;
}

和前缀(生产就绪)版本：

.navbarheader {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  white-space: nowrap;
}
.header-right,.header-left {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
}
.header-right {
  text-align: right;
}

但相关部分是

.header-right,.header-left { flex-basis: 50%; }