How can I center-align text with uneven icons either side?

Question

I'm trying to center align the text in this image, ideally using as little CSS/HTML as possible. As you can see, the icons on the left push it off center:

Here's the relevant HTML and CSS for this top section:

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

Any ideas how to keep the text center aligned, but allow it to occupy all the blank space if necessary?

Worth mentioning this is in a Bootstrap 4.0 alpha codebase.

Answer 1

You need to make sure both .header-right and .header-left apply the same "flex" pressure on .header-title. Their flex-grow, flex-shrink and flex-basis need to be equal. By default, they have flex:0 1 auto; so you don't need to worry about flex-grow[0] and flex-shrink[1].

However, you need to change the auto into a practical value (anything translatable in px by the browser: %, px, em, rem,...), greater than 50% (you can go below 50% if you set flex-grow:1; on .header-left and .header-right - just remember to make them equal).

Your title, even though will have a resulting flex-basis of 0, will grow eating up equally from left and right's width. Of course, you need to make sure it always stays on 1 line by adding white-space:nowrap to it (if it's really long and you think it should wrap on some very narrow screens place the white-space rule inside a @media query; also, remember to give your .header-title sufficient flex-basis when you allow it to wrap, so it doesn't wrap on too many lines - don't worry if your total flex-basis is larger than 100%, all browsers will scale all elements down proportionally if the parent's flex-wrap is set to nowrap).

If you prefer CSS to English, here goes code:

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

And the prefixed (production ready) version:

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

But the relevant part is

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

Answer 2

Distribute your headers in amounts you can live with without breaking responsiveness. so that you have a perfect amount to center with and an equal amount to each side to use as gutters or margins.

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

See the demo (I colored the backgrounds so that you can distinguish the distances)

Answer 3

you could add a gap same size as icon missing:

.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

You have to use position: absolute on header-title and remove it from natural flow of elemnts so it will always be centered relatively to 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>