色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

我怎樣才能在CSS中始終將輸入表單旁邊的標簽字體文本垂直居中對齊？

CSS
榮姿康2年前9瀏覽0評論

我旁邊有一個標簽和一個輸入表單。默認情況下，使用字體系列Cambria，輸入框比它的標簽文本略低。 這是我當前設置的樣子，如果你仔細看，輸入框比字體略低

這就是我試圖實現的:輸入框正好位于& quot:& quot(冒號) 我可以通過在CSS中操縱標簽的高度/行高來實現它，但是我試圖找到一種更優雅和簡單的方法(如果可能的話)來調整所需項目旁邊的任何字體。

https://jsfiddle.net/5yuv34Ln/1/-這是我的原始代碼，你可以看到輸入形式略低于字體。

超文本標記語言

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

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.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/——這是我朋友提供的解決方案，但我想知道是否有其他選擇，我可以用一種簡單或有條理的方式做到這一點，而不用手動調整標簽周圍的像素。

為了垂直對齊行中的兩個元素，您只需指定行項目的行高，并更改父DIV的垂直對齊值(即& quot基線& quot)到& quottext-top & quot；像這樣:

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