如何将文本与不均匀图标对齐？

Question

我试图在这个图像中居中对齐文本,理想情况下使用尽可能少的CSS/HTML.如您所见,左侧的图标将其推离中心:

以下是此顶部的相关HTML和CSS:

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

CSS:

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

任何想法如何保持文本中心对齐,但如果有必要允许它占据所有空白？

值得一提的是Bootstrap 4.0 alpha代码库.

Answer 1

你需要确保两者.header-right并.header-left施加相同的"弹性"压力.header-title.他们flex-grow,flex-shrink并且flex-basis需要是相等的.默认情况下,它们 flex:0 1 auto;不需要担心flex-grow[ 0]和flex-shrink[ 1].

但是,您需要更改auto(任何翻译在进入实用价值px由浏览器:%,px,em,rem,...),大于50%(你可以在下面走50%,如果你设置flex-grow:1;上.header-left和.header-right-只记得,使他们平等).

你的标题,尽管将有导致flex-basis的0,将增长从左右的宽度同样吃起来.当然,你需要通过添加white-space:nowrap它来确保它始终保持在1行(如果它真的很长并且你认为它应该包含在一些非常狭窄的屏幕上,将white-space规则放在@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%; }