时间戳

首页 > 解决方案 > HTML/CSS：如何在中心修复标题

html - HTML/CSS：如何在中心修复标题

问题描述

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

标题：

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

登录按钮：

<div id="login">
/*Displays login button if user is logged in, 'Welcome, user' if not*/   
{this.state.loggedIn?  
    <div className="welcomeText">
        <p>Welcome, {this.state.user}</p> 
    </div> :
    <div>
        <button id="loginButton" onClick={this.onClick}>Login</button> 
    </div> 
}     
</div>

CSS：

#header {
    text-align:center;
}

#login {
    float:right;
}

.welcomeText {
    float:right;
}

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

标签： htmlcssheader

解决方案

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

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>

CSS

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

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

设置position: relative为#page-header使子元素相对于它而不是页面定位。然后设置position: absolute在#login元素上。如果您设置它的正确位置，它将始终位于集中#header文本的右侧。

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

https://codepen.io/raptorkraine/pen/QBdbPy

推荐阅读