如何在包含其他元素的div中不换行单独居中锚点链接

尝试在网页中实现锚点元素居中效果，但始终无法将单个链接调整到合适的居中位置。若使用text-align: center;实现居中，需要依托div容器，会导致内容被分割到新行；尝试网上提到的margin、span等其他实现技巧，要么会导致表单元素换行，要么完全不生效。

当前使用的代码如下：

现有CSS代码 #

span.right {
    float: right;
}

现有HTML代码 #

<form action="login.py" method="post">
  <div class="container">
    <label for="username">
      <b>Username</b>
    </label>
    <input type="text" placeholder="Enter Username" name="uname" required>
    <label for="pword">
      <b>Password</b>
    </label>
    <input type="password" placeholder="Enter password" name="pword" required>
    <button type="submit">Login</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
    <a class="link-secondary" href="#">Sign up?</a>
    <span class="right"><a class="link-secondary" href="#">Forgot password?</a></span>
  </div>
</form>

需求为让内容为“Sign up?”的锚点链接显示在所在行的居中位置，预期效果如下图：

不要用浮动实现这类同一行的多位置对齐需求。浮动本身会脱离正常文档流，很容易出现错位、换行问题，直接给放置三个行内元素（记住我复选框、注册链接、忘记密码链接）的父容器加Flex布局即可，实现简单且不会出现意外换行：

• 首先把三个需要同行排列的元素单独包裹在一个flex容器里，和上方的输入框、登录按钮区分开，避免影响其他表单元素布局
• 给这个flex容器设置justify-content: space-between，自动把三个元素分别推到行首、行中、行尾位置，刚好匹配左、中、右分布的需求
• 给容器加align-items: center保证三个元素垂直方向居中对齐，不会出现高低错位

修改后的完整代码如下：

修改后CSS #

.form-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0; /* 可根据表单实际间距需求调整数值 */
}

修改后HTML #

<form action="login.py" method="post">
  <div class="container">
    <label for="username">
      <b>Username</b>
    </label>
    <input type="text" placeholder="Enter Username" name="uname" required>
    <label for="pword">
      <b>Password</b>
    </label>
    <input type="password" placeholder="Enter password" name="pword" required>
    <button type="submit">Login</button>
    <!-- 三个同行元素包裹在flex容器中 -->
    <div class="form-action-row">
      <label>
        <input type="checkbox" checked="checked" name="remember"> Remember me
      </label>
      <a class="link-secondary" href="#">Sign up?</a>
      <a class="link-secondary" href="#">Forgot password?</a>
    </div>
  </div>
</form>

这种实现方式不需要给右对齐的忘记密码链接单独加浮动类，Flex布局会自动完成位置分配，不会出现元素换行、居中失效的问题，适配所有现代浏览器。

如果不想新增额外的包裹容器，也可以直接给.container设置flex布局+flex-direction: column，再单独给三个同行元素的公共父级设置行方向flex属性，不过单独抽离操作行的结构更清晰，后续维护调整样式更方便。

内容的提问来源于stack exchange，提问作者user14695006