Question

我的页面上有2个div，我想要显示一个以页面为中心（页面标题），另一个向右浮动（导航栏）。我无法将标题相对于页面居中。我能做的最好的事情是让它相对于导航栏左侧剩余的空间居中。

这证明了我遇到的问题。

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

如何让另一个div中的2个div居中并浮动到右边？

1 个答案: