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

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% （如果您在.header-left 和.header-right 上设置flex-grow:1;，则可以低于50% - 请记住使它们相等）。

您的标题，即使会产生 flex-basis 或 0，也会从左右宽度相等地增长。当然，您需要通过添加white-space:nowrap 来确保它始终保持在第一行（如果它真的很长并且您认为它应该在一些非常窄的屏幕上换行，请将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%; }

Answer 2

您必须在header-title 上使用position: absolute 并将其从元素的自然流中移除，这样它就始终居中 相对于navbarheader

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  border: 1px solid black;
  position: relative;
}

.title {
  position: absolute;
  left: 50%;
  transform: translateY(-50%);
}

a {
  font-size: 30px;
  padding: 0 10px;
}

<nav>
  <div class="left">
    <a href="">Icon</a>
    <a href="">Icon</a>
  </div>
  
  <div class="title">Title</div>
  
  <div class="right">Icon</div>
</nav>

Answer 3

您可以添加与缺少图标大小相同的间隙：

.navbarheader > :last-child{
  margin-left:2.5rem;
}

demo

/* background gradient added to visualize centers */

.navbarheader {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  max-width: 600px;
  padding: 1em 0;
  margin: auto;
  background: linear-gradient(to left, gray 50%, lightgray 50%);
}
.navbarheader .header-left {
  margin-left: -0.5rem;
}
.navbarheader .header-title {
  flex-grow: 2;
  text-align: center;
  background: linear-gradient(to right, gray 50%, lightgray 50%);
}
.navbarheader .header-right {
  margin-right: -0.5rem;
}
.navbarheader >:last-child {
  margin-left: 2.5rem;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.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">whatever text</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>

Answer 4

在不破坏响应能力的情况下以您可以承受的数量分配您的标题。这样您就有一个完美的居中量，并且每边都有相等的量用作排水沟或边距。

.navbarheader .header-left {
  margin-left: -0.5rem;
    width:20%; /* adjust accordingly if it's too much. do the same in the other to complete 100% total */
    background: red;
}
.navbarheader .header-title {
  flex-grow: 2;
  text-align: center;
    width:60%;
    background: yellow;
}
.navbarheader .header-right {
  margin-right: -0.5rem;
    width:20%;
    background: green;
}

查看demo（我为背景着色，以便您区分距离）

Answer 5

用负边距修复它...将文本和margin-left 居中以减去左侧图标宽度的一半。