how to center text between 2 elements that are floated left and right, respectively?

Question

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

How do I get the or to be both vertically and horizontally centered between the 2 buttons?

score 1 · Answer 1 · answered Apr 26 '21 at 05:19

Use flex like

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

I see that it works. But is there another way to do it? This is only the minimum reproducible example. In reality, setting `justify-content: space-between;` broke other parts of the code. Currently, it is set to `justify-content: center;` — Bear Bile Farming is Torture, Apr 26 '21 at 05:24

score 1 · Answer 2 · answered Apr 26 '21 at 05:24

1

If this is your only form, you can add this CSS style:

form {
  text-align: center;
}

Otherwise you can give form a class name and target that class with the same rule:

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

answered Apr 26 '21 at 05:24

Igal

5,833
20
74
132

That got it to be horizontally in center. But vertically it is still on top. Any other solutoin? – Bear Bile Farming is Torture Apr 26 '21 at 05:29
Then I'd really go with the proposed flex solution: `form { display: flex; justify-content: space-between; align-items: center; }` If it broke some other part - perhaps you should rethink your markup. – Igal Apr 26 '21 at 06:14

Arpita Patel · Accepted Answer · 2021-04-26T05:39:18.750

using the flex css :

add this two css for center text between 2 floated element.

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>

score 0 · Answer 4 · answered Apr 26 '21 at 05:52

I have removed your input buttons and replaced them with div and added/removed some CSS, you can go through the comments in the code

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

score 0 · Answer 5 · answered Apr 26 '21 at 06:00

you can also do it by changing the form position to relative and span position to absolute then change the span left to 50% this will make the text centered between the two buttons if you dont want to use flex or grid:

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

score 0 · Answer 6 · answered Apr 26 '21 at 06:05

0

you can simply use flexbox and use justify content space around

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

answered Apr 26 '21 at 06:05

I_love_vegetables

1,575
5
12
26

how to center text between 2 elements that are floated left and right, respectively?

6 Answers6