html - 将我的品牌放在我的 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>