如何修复按钮和文本输入的错位[重复]

Question

我正在尝试在网站上创建一个包含文本输入、按钮和一些文本的小部分。但是，输入和按钮似乎与文本没有正确对齐。为什么会这样，我该如何解决？

这是我所拥有的：

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

我该如何解决这个问题？我希望我的输入和按钮不完全与 div 的顶部对齐，但也不低于文本。如果有意义的话，它们应该与文本完全内联。

这是一个例子，橙色线是我希望每个元素的垂直中间对齐的位置。到目前为止，您可以看到它们不是。

Answer 1

也许使用 display: flex 代替 block 可以帮助解决对齐问题？显式设置按钮和输入的宽度也可能会导致一些问题，因此我在示例中删除了这些。

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