html - 如何将两侧带有不均匀图标的文本居中对齐？

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 ”压力.他们的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%; }