标题居中、按钮位于右侧的导航栏 [英] Navbar with Title in center and buttons to right

问题描述

所以我尝试创建一个导航栏，标题位于中间，按钮显示在右侧。如您所见，当我尝试执行此操作时，该按钮出现在下一行的div：

之外

Fiddle

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.title-bar {
  background-color: #48A6B8;
  font-style: italic;
  margin-bottom: 3%;
  color: #fff;
}

.title {
  text-align: center;
  font-size: 36px;
  line-height: 180%;
}

.buts {
  float: right;
}

<div class="title-bar">
  <div class="title">Title</div>
  <div class="button">
    <button class="buts">Whats Up</button>
  </div>
</div>

display:inline-block似乎移去了文本的居中位置，因此我无法使用它...

提前谢谢！

推荐答案

使用flexbox

flex: 1 0 auto;将使title灵活，它将获取flex-container中的所有可用空间。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.title-bar {
  background-color: #48A6B8;
  font-style: italic;
  margin-bottom: 3%;
  color: #fff;
  display: flex;
}

.title {
  text-align: center;
  font-size: 36px;
  line-height: 180%;
  flex:1 0 auto;
}

<div class="title-bar">
  <div class="title">Title</div>
  <div class="button">
    <button class="buts">Whats Up</button>
  </div>
</div>

---

编辑：在@Burak评论它不在正中之后。

正如您在下图中看到的，部分空间由"上一页"按钮获得，这就是为什么标题不在确切的中心，而文本在其父标题的确切中心。

我们也可以使它正好居中，但要做到这一点，我们需要使用position:absolute

将向上按钮移动到另一层上 数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.title-bar {
  background-color: #48A6B8;
  font-style: italic;
  margin-bottom: 3%;
  color: #fff;
  display: flex;
  position:relative;
}

.title {
  text-align: center;
  font-size: 36px;
  line-height: 180%;
  flex:1 0 auto;
  
  background:rgba(0,0,0,.5)
}

.button{
  position:absolute;
  right:0;
  top:0;
}

<div class="title-bar">
  <div class="title">Title</div>
  <div class="button">
    <button class="buts">Whats Up</button>
  </div>
</div>

这篇关于标题居中、按钮位于右侧的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！