How to fix misalignment of button and text input

Question

I am trying to make a small section on a site with a text input, a button, and some text. However, it seems the input and button arent properly aligned with the text. Why is this, and how can I fix it?

Here is what I have:

:root {

    --font: "Bebas Neue", cursive;

    --color1: 227, 227, 227; /* Light Grey */
    --color2: 18, 18, 18;    /* Dark Grey  */

}

html, body {

    font-family: var(--font);
    color: rgb(var(--color1));
    background: rgb(var(--color2));
    overflow: hidden;
    flex-direction: column;

}

@keyframes _slide_down {

    0% { top: -200%; }
    10% { top: -100%; }
    100% { top: 0.8%; }

}

.slide_down {

    position: absolute;
    left: 0;
    right: 0;
    top: 0.8%;
    margin-left: auto;
    margin-right: auto;
    animation: _slide_down 5s;

}

.top_left { position: absolute; top: 0.8%; left: 1%; }

.padded { padding: 1%; }

.squircle  { border-radius: 30px; }

.centered { text-align: center; margin: auto; display: block; }

.large { font-family: var(--font); font-size: 300%; }

.medium { font-family: var(--font); font-size: 38%; }

.glowing { text-shadow: 0 0 10px rgba(var(--color1), 0.6); }

._glowing { box-shadow: 0 0 10px rgba(var(--color1), 0.6); }

.right_rounded { border-top-right-radius: 15px; border-bottom-right-radius: 15px; }

.left_rounded { border-top-left-radius: 15px; border-bottom-left-radius: 15px; }

.stretched { width: 45%; }

.squished { width: 13%; }

<link rel = "preconnect" 
            href = "https://fonts.gstatic.com">
    <link href = "https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" 
            rel = "stylesheet">

<div id = "generated_fen"
            class = "large stretched slide_down centered padded glowing">

        FEN Key:

        <input type = "text"
                id = "fenID"
                class = "stretched padded medium left_rounded"
                placeholder = "xxxxxxxx/xxxxxxxx/x/x/x/x/xxxxxxxx/xxxxxxxx x xxxx - x x"/>

        <button type = "button"
                id = "set_to_fen"
                class = "squished padded medium right_rounded"> Set FEN ‎‎‎‎</button>

    </div>

How would I fix this? I want my input and button to not be completely aligned to the top of the div, but also not lower than the text either. They should be perfectly inline with the text, if that makes sense.

Here is a sort of example, where the orange line is where I want the vertical middle of each element to line up. As of now, you can see they are not.

Ross Moody · Accepted Answer · 2021-06-18T01:04:47.640

Maybe using display: flex instead of block could help iron out the alignment issues? Explicitly setting the widths of the button and input might cause ya some issues as well so I removed those for the example.

:root {
  --font: "Bebas Neue", cursive;
  --color1: 227, 227, 227;
  /* Light Grey */
  --color2: 18, 18, 18;
  /* Dark Grey  */
}

html,
body {
  font-family: var(--font);
  color: rgb(var(--color1));
  background: rgb(var(--color2));
  overflow: hidden;
  flex-direction: column;
}

@keyframes _slide_down {
  0% {
    top: -200%;
  }
  10% {
    top: -100%;
  }
  100% {
    top: 0.8%;
  }
}

.slide_down {
  position: absolute;
  left: 0;
  right: 0;
  top: 0.8%;
  margin-left: auto;
  margin-right: auto;
  animation: _slide_down 5s;
}

.top_left {
  position: absolute;
  top: 0.8%;
  left: 1%;
}

.padded {
  margin: 2px;
}

.squircle {
  border-radius: 30px;
}

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.large {
  font-family: var(--font);
  font-size: 300%;
}

.medium {
  font-family: var(--font);
  font-size: 38%;
}

.glowing {
  text-shadow: 0 0 10px rgba(var(--color1), 0.6);
}

._glowing {
  box-shadow: 0 0 10px rgba(var(--color1), 0.6);
}

.right_rounded {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.left_rounded {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">

<div id="generated_fen" class="flex large stretched slide_down centered padded glowing">

  <span>FEN Key:</span>

  <input type="text" id="fenID" class="padded medium left_rounded" placeholder="xxxxxxx" />

  <button type="button" id="set_to_fen" class="padded medium right_rounded">Set FEN ‎‎‎‎</button>

</div>

@Aryan you can then use `justify-content: center;` to align the item center horizontally... — DecPK, Jun 18 '21 at 01:03

How to fix misalignment of button and text input

1 Answers1