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

你的头衔虽然会产生flex-basis 0，但会从左右宽度同等地消耗。当然，你需要确保它总是保持在1行，方法是向它添加white-space:nowrap（如果它真的很长，你认为它应该包含在一些非常狭窄的屏幕上，将white-space规则放在@media内{1}}查询;另外，请记住在允许它包裹时给你的.header-title足够flex-basis，所以它不会包含太多行 - 不要担心你的总数{{} 1}}大于flex-basis，如果父级100%设置为flex-wrap，则所有浏览器都会按比例缩放所有元素。

如果您更喜欢CSS到英语，请输入代码：

nowrap

前缀（生产就绪）版本：

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

Answer 2

以您可以使用的金额分发您的标题，而不会破坏响应能力。因此，你有一个完美的数量，以每个边的中心和相等的数量用作排水沟或边距。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

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

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

5 个答案: