将我的品牌放在我的flexbox顶部栏中间

Question

我正在我的导航栏上方构建一个顶部栏，所以这不是导航，在小屏幕上不需要汉堡包图标。我希望顶部栏在左端有一个图标，中间有一个品牌，右端有2个图标。我一直在尝试使用flexbox来实现我的目标，但我不能让中心品牌集中。

我的代码是

<div class="container-fluid bg-light topbar">
<div id="compassicon" class="d-flex justify-content-end text-muted">
  <div class="text-muted fa fa-compass fa-2x"></div>
  <div id="townlabel" class="mr-auto p-2">Town</div>
  <div class="center">
  <p class="title-border title-text">Brand Name
  </p>
  </div>
  <div class="text-muted fa fa-user-o fa-2x"></div>
  <div class="text-muted fa fa-power-off fa-2x"></div>
</div>

CSS

.title-border {
border: 1px solid black;
border-radius: 20px;
background: #3BA7A4;


}

.title-text {
color: white !important ;
 /*font-family: 'Shrikhand', cursive;*/
font-family: 'Jura', sans-serif;
font-size: 1.5em;

}

#townlabel * {
display: inline-block;
vertical-align: middle;
font-family: 'Jura', sans-serif;

}
#compassicon {
display: inline-block;
}

.topbar {
max-height: 41px;
}

.brand-heading {
 float: none;
}

有什么想法吗？

Answer 1

你想要这样的东西吗？然后是父元素上的text-align:center和文本元素上的display: inline-block

.title-border {
border: 1px solid black;
border-radius: 20px;
background: #3BA7A4;


}

.title-text {
color: white !important ;
 /*font-family: 'Shrikhand', cursive;*/
font-family: 'Jura', sans-serif;
font-size: 1.5em;

}

#townlabel * {
display: inline-block;
vertical-align: middle;
font-family: 'Jura', sans-serif;

}
#compassicon {
text-align: center;
}

.topbar {
max-height: 41px;
}

.brand-heading {
 float: none;
}

<div class="container-fluid bg-light topbar">
<div id="compassicon" class="d-flex justify-content-end text-muted">
  <div class="text-muted fa fa-compass fa-2x"></div>
  <div id="townlabel" class="mr-auto p-2">Town</div>
  <div class="center" style="display: inline-block;">
  <p class="title-border title-text">Brand Name
  </p>
  </div>
  <div class="text-muted fa fa-user-o fa-2x"></div>
  <div class="text-muted fa fa-power-off fa-2x"></div>
</div>