如何分别在左右浮动的 2 个元素之间居中文本？ [复制]答案

【问题标题】：how to center text between 2 elements that are floated left and right, respectively? [duplicate]如何分别在左右浮动的 2 个元素之间居中文本？ [复制]
【发布时间】：2021-07-19 12:06:51
【问题描述】：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      color: white;;
      background-color: #1E1B1B;
      }
      input[type=button] {
      border-radius: 8px;
      margin-top: 5px;
      margin-bottom: 10px;
      width: 110px;
      height: 25px;
      background-color: tomato;
      border-style: none;
      }
      #log-in {
      float: left;
      }
      #register {
      float: right;
      }
    </style>
  </head>
  
  <body>
    <div class="page-root">
      <div class="login-box">
        <form>
      <input type="button" id="log-in" value = "Log In" onclick="alert('Hello World!')">
      <span>or</span>
      <input type="button" id="register" value = "Register" onclick="alert('Hello World!')">
    </form>
      </div>
    </div>
  </body>
</html>

如何让or 在两个按钮之间垂直和水平居中？

【问题讨论】：

标签： html css

【解决方案1】：

用flex点赞

.login-box form{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body {
      color: white;;
      background-color: #1E1B1B;
      }
      input[type=button] {
      border-radius: 8px;
      margin-top: 5px;
      margin-bottom: 10px;
      width: 110px;
      height: 25px;
      background-color: tomato;
      border-style: none;
      }
      .login-box form{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

    <div class="page-root">
      <div class="login-box">
        <form>
      <input type="button" id="log-in" value = "Log In" onclick="alert('Hello World!')">
      <span>or</span>
      <input type="button" id="register" value = "Register" onclick="alert('Hello World!')">
    </form>
      </div>
    </div>

【讨论】：

我看到它有效。但是还有另一种方法吗？这只是最小的可重现示例。实际上，设置justify-content: space-between; 会破坏代码的其他部分。目前设置为justify-content: center;
@ganidat 你可以试试space-around 喜欢我的回答

【解决方案2】：

如果这是你唯一的表单，你可以添加这个 CSS 样式：

form {
  text-align: center;
}

否则，您可以给表单一个类名并使用相同的规则定位该类：

.my-form {
  text-align: center;
}

【讨论】：

这让它水平居中。但垂直它仍然在顶部。还有其他的解决方案吗？
那么我真的会采用提议的 flex 解决方案：form { display: flex; justify-content: space-between; align-items: center; } 如果它破坏了其他部分 - 也许你应该重新考虑你的标记。

【解决方案3】：

使用flex css：

为两个浮动元素之间的中心文本添加这两个 css。

form{ display: flex;}

span.orText { display: flex; align-items: center; flex: 1;justify-content: center;}

    <!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      color: white;;
      background-color: #1E1B1B;
      }
      form {
        display: flex;
      }
      input[type=button] {
      border-radius: 8px;
      margin-top: 5px;
      margin-bottom: 10px;
      width: 110px;
      height: 25px;
      background-color: tomato;
      border-style: none;
      }
      #log-in {
      float: left;
      }
      #register {
      float: right;
      }
      span.orText {
        display: flex;
        align-items: center;
        flex: 1;
            justify-content: center;
      }
    </style>
  </head>
  
  <body>
    <div class="page-root">
      <div class="login-box">
        <form>
      <input type="button" id="log-in" value = "Log In" onclick="alert('Hello World!')">
      <span class="orText">or</span>
      <input type="button" id="register" value = "Register" onclick="alert('Hello World!')">
    </form>
      </div>
    </div>
  </body>
</html>

【讨论】：

【解决方案4】：

我已经删除了您的input 按钮并用div 替换它们并添加/删除了一些CSS，您可以浏览代码中的cmets

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      color: white;
      background-color: #1E1B1B;
    }
    /* added */
    .div-btn {
      border-radius: 8px;
      margin-top: 5px;
      margin-bottom: 10px;
      width: 110px;
      height: 25px;
      background-color: tomato;
      border-style: none;
      cursor: pointer;
    }
    
    .div-no-btn {
      height: 25px;
    }
    
    .login-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .flex-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* added */
  </style>
</head>

<body>
  <div class="page-root">
    <!-- updated -->
    <div class="login-box">

      <div id="log-in" class="div-btn flex-center" onclick="alert('Hello World!')">Log In</div>
      <div class="div-no-btn flex-center">or</div>
      <div id="register" class="div-btn flex-center" onclick="alert('Hello World!')">Register</div>

    </div>
    <!-- updated -->
  </div>
</body>

</html>

【讨论】：

【解决方案5】：

您也可以通过将表单位置更改为相对位置并将跨度位置更改为绝对位置然后将跨度左侧更改为 50%，如果您不想这样做，这将使文本在两个按钮之间居中使用弹性或网格：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      color: white;;
      background-color: #1E1B1B;
      }
      input[type=button] {
      border-radius: 8px;
      margin-top: 5px;
      margin-bottom: 10px;
      width: 110px;
      height: 25px;
      background-color: tomato;
      border-style: none;
      }

      form{
          position: relative;
      }
      #log-in {
      float: left;
      }
      #register {
      float: right;
      }
      
      span{
        position: absolute;
        left:50%
    }
    </style>
  </head>
  
  <body>
    <div class="page-root">
      <div class="login-box">
        <form>
      <input type="button" id="log-in" value = "Log In" onclick="alert('Hello World!')">
      <span>or</span>
      <input type="button" id="register" value = "Register" onclick="alert('Hello World!')">
    </form>
      </div>
    </div>
  </body>
</html>

【讨论】：

【解决方案6】：

您可以简单地使用 flexbox 并使用 justify content space around

form{
  display : flex;
  justify content : space-around;
  align-items:center;
}

【讨论】：