HTML/CSS：如何修复中间的标题

这里是HTML/CSS新手。我正在制作一个网页，在页面的顶部中间有一个文本标题，在右上角有一个登录按钮。我正在使用React（使用嵌入式HTML）在引导程序中编写。这是代码

标题：

<div className="page-header">
         <h1 id="header">Header text</h1>
</div>

---

问题是登录按钮将标题文本推到左侧，我无法将其移回。我可以使用填充暂时解决这个问题；但是，当登录按钮被用户名替换时，用户名越长，登录按钮就会被推得越远。我想知道如何解决这个问题，以便用户名正确对齐，标题保持不变。提前谢谢

我会使用绝对定位。我已经简化了这个例子，但你应该有个好主意

HTML

<div id="page-header">
  <h1 id="header">Header text</h1>

  <div id="login">
    <div className="welcomeText">
        <p>Welcome, Test User</p>
    </div>
    <div>
        <button id="loginButton">Login</button> 
    </div>  
  </div>
</div>

在

#页眉

上设置

position:relative

，使子元素相对于它而不是相对于页面定位。然后在

#login

元素上设置

位置：绝对值。如果设置正确的位置，它将始终位于居中的
#标题的右侧

只要将绝对位置应用于
#login
元素，子元素的大小就无关紧要。不过，您可能需要在较小的设备上对此进行调整，因为会出现文本重叠

正如您在中所写，它可能是react或类似javascript jsx格式的东西

对于标题修复，您应该编写如下代码。下面给出的代码只是根据您的需要将标题固定在顶部位置

.page-header{
    position:fixed;
    top:0;
    width:100%;
}

也许你可以绝对定位它（登录）@zgood谢谢，我刚试过，它把按钮移到了左边——不幸的是，它似乎覆盖了右边的浮动。非常感谢，这正是我想要的！！
<div id="page-header">
  <h1 id="header">Header text</h1>

  <div id="login">
    <div className="welcomeText">
        <p>Welcome, Test User</p>
    </div>
    <div>
        <button id="loginButton">Login</button> 
    </div>  
  </div>
</div>

#page-header {
  background-color: #f0f0f0;
  padding: 1em;
  position: relative;
  text-align: center;
}

#login {
  position: absolute;
  right: 1em;
  top: 1em;
}

.page-header{
    position:fixed;
    top:0;
    width:100%;
}