html - 如何让另一个 div 中的 2 个 div 居中并向右浮动？

Question

我的页面上有 2 个 div，我希望其中一个相对于页面居中(页面标题)，另一个 float 到右侧(导航栏)。我无法让标题相对于页面居中。我能做的最好的事情就是让它相对于导航栏左侧剩余的空间居中。

这说明了我遇到的问题。

<style>
  .page {
    width: 400px;
    margin: 0 auto;
    background: red;
  }
  .navbar {
     float: right;
   }
  .title {
      text-align: center;
  }
</style>


<div class='page'>
  <div class='navbar'>
    navbar
  </div>
  <div class='title'>
    <h1>TITLE GOES HERE</h1>
  </div>
</div>

有没有简单的解决办法？

Answer 1

如何this ？

<style>
  .page {
    width: 400px;
    margin: 0 auto;
    background: red;
    position:relative;
  }
  .navbar {
    position:absolute;
    right:2px;
   }
  .title {
      text-align: center;
  }
</style>


<div class='page'>
  <div class='navbar'>
    navbar
  </div>
  <div class='title'>
    <h1>TITLE GOES HERE</h1>
  </div>
</div>