如何在 CSS 中始终对齐输入表单旁边的标签字体文本以使其完全水平居中？

Question

我旁边有一个标签和一个输入表格。默认情况下，对于字体系列 Cambria，输入框略低于标签文本。

我能够通过在 CSS 中操纵标签的高度/行高来实现它，但我试图找到一种更优雅和简单的方法（如果可能的话）来调整所需项目旁边的任何字体。

https://jsfiddle.net/5yuv34Ln/1/ - 这是我的原始代码，您可以在其中看到输入形式略低于字体。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/styles.css">
    <title>Guess a Number Game</title>
</head>

<body>
    <main>
        <header class="header">Guess a Number Game</header>
        <div class="main-text">From 1 to 20</div>
        <div class="input">
            <label class="main-text" for="guess-input">Put your guess here:</label>
            <input id="guess-input" type="number">
        </div>
        <section>
            <div id="feedback"></div>
        </section>
        <div>
            <button id="guess-button" class="btn">Guess</button>
        </div>
        <div>
            <button id="again-button" class="btn">Play Again</button>
        </div>
    </main>
    <script src="scripts/index.js"></script>
</body>

</html>

CSS

.btn {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: x-large;
    margin: 10px 0px;
}

.main-text {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: x-large;

}

.header {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: x-large;
    border-bottom: solid;
    background-color: beige;
    font-weight: bold;
    color: darkslategray
}

#feedback {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: x-large;
    border-top: solid;
    margin-top: 20px;
    padding: 10px;
}

#guess-input[type=number]::-webkit-inner-spin-button,
#guess-input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

https://jsfiddle.net/5yuv34Ln/ - 这是我朋友提供的解决方案，但我想知道是否有任何其他选项可以让我以简单或有组织的方式使用它，而无需手动调整周围的像素标签。

Answer 1

为了垂直对齐行中的两个元素，您只需为行项指定行高并将父 DIV 的vertical-align值（即“baseline”）更改为“text -top”像这样：

div.input input,
div.input label{
  line-height: 30px;
  vertical-align: text-top;
}

如何在 CSS 中始终对齐输入表单旁边的标签字体文本以使其完全水平居中？

问题描述投票：0回答：1

1个回答

最新问题

如何在 CSS 中始终对齐输入表单旁边的标签字体文本以使其完全水平居中？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1