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

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> 

Answer 5

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