我试图在这个图像中居中对齐文本,理想情况下使用尽可能少的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代码库.
解决方法
你需要确保.header-right和.header-left对.header-title施加相同的“flex”压力.它们的柔韧生长,弯曲收缩和柔性基础需要相等.默认情况下,它们有flex：0 1 auto;所以你不必担心flex-grow [0]和flex-shrink [1].
但是,您需要将auto更改为实用值(浏览器在px中可翻译的任何内容：％,px,em,rem,…),大于50％(如果设置flex-,则可以低于50％增长：1;在.header-left和.header-right上 – 只记得让它们相等).
你的标题即使会产生0的弹性基础,也会从左右宽度上同等地增加.当然,你需要确保它始终保持在1行,方法是添加white-space：nowrap到它(如果它真的很长并且你认为它应该包裹在一些非常狭窄的屏幕上,将空格规则放在@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%; }
