居中元素的文本

Center element's text

提问人：Matheus Caetano Rocha 提问时间：11/3/2023 最后编辑：karelMatheus Caetano Rocha 更新时间：11/3/2023 访问量：53

问：

如您所见，目前标签显示在输入的左上角 - 在开发工具中检查标签元素时，我可以看到标签与输入元素具有相同的高度和位置，但由于某种原因，标签的文本显示在元素的顶部。

如何集中所述文本，使其集中在其标签元素中并显示在输入字段的左中？

.new-food-form label { margin-right: 0.5vw; }

@media screen and (min-width: 992px) {
    .new-food-form > div > :nth-child(n+4) { margin-top: 1vw; }
    .confirm-new-food { margin-top: 1vw; }
}

@media screen and (max-width: 991px) {
    .new-food-buttons .row { justify-content: space-between; }
    .food-item-row > div, .new-food-form input, .new-food-form select { margin-bottom: 1.5vw; }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body class="m-3">
        <form class="new-food container-fluid needs-validation" novalidate>
            <div class="row">
                <div class="new-food-form col-12 col-lg-10">
                    <div class="row">
                        <div class="col-12 col-lg-4 d-flex">
                            <label for="new-food-name${uniqueId}">Name:</label>
                            <input class="form-control new-food-name" required type="text" id="new-food-name${uniqueId}" placeholder="Food name">
                        </div>
                        <div class="col-12 col-lg-4 d-flex">
                            <label for="new-food-calories${uniqueId}">Calories:</label>
                            <input class="form-control new-food-calories" required type="number" id="new-food-calories${uniqueId}" placeholder="Calories (in grams, only numbers)">
                        </div>
                        <div class="col-12 col-lg-4 d-flex">
                            <label for="new-food-proteins${uniqueId}">Proteins:</label>
                            <input class="form-control new-food-proteins" required type="number" id="new-food-proteins${uniqueId}" placeholder="Proteins (in grams, only numbers)">
                        </div>
                        <div class="col-12 col-lg-4 d-flex">
                            <label for="new-food-carbs${uniqueId}">Carbs:</label>
                            <input class="form-control new-food-carbs" required type="number" id="new-food-carbs${uniqueId}" placeholder="Carbs (in grams, only numbers)">
                        </div>
                        <div class="col-12 col-lg-4 d-flex">
                            <label for="new-food-fats${uniqueId}">Fats:</label>
                            <input class="form-control new-food-fats" required type="number" id="new-food-fats${uniqueId}" placeholder="Fats (in grams, only numbers)">
                        </div>
                        <div class="col-12 col-lg-4 d-flex">
                            <label for="new-food-portion${uniqueId}">Portion:</label>
                            <select class="form-select new-food-portion" required id="new-food-portion${uniqueId}">
                                <option selected disabled>Select portion type</option>
                                <option value="1 unit">1 unit</option>
                                <option value="100 g">100 g</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="new-food-buttons col-12 col-lg-2">
                    <div class="row">
                        <button class="cancel-new-food col-5 col-lg-12 btn btn-danger" type="button">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"></path>
                                <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"></path>
                            </svg> Cancel
                        </button>
                        <button class="confirm-new-food col-5 col-lg-12 btn btn-success" type="submit">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                            <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                            </svg> Create
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </body>
</html>

HTML CSS 推特引导

评论

答：

3赞 Ayush Mhetre 11/3/2023 #1

如果这是您要实现的目标：enter image description here

由于您使用的是 bootstrap，因此只需添加

align-items-center

这个类到

<div class="col-12 col-lg-4 d-flex">

并使其像：

<div class="col-12 col-lg-4 d-flex align-items-center">

align-items-center 将确保 flex 中的所有项目都垂直居中。

1赞 Moob 11/3/2023 #2

根据公认的答案，您可以添加类来实现此目的，但请注意，您的遗嘱会使事情不合时宜，因此您也应该将此样式应用于：align-items-centermargin-bottom: 1.5vw;.new-food-form input.new-food-form label

.new-food-form label { margin-right: 0.5vw; }

@media screen and (min-width: 992px) {
    .new-food-form > div > :nth-child(n+4) { margin-top: 1vw; }
    .confirm-new-food { margin-top: 1vw; }
}

@media screen and (max-width: 991px) {
    .new-food-buttons .row { justify-content: space-between;}
    .food-item-row > div, .new-food-form label, .new-food-form input, .new-food-form select { margin-bottom: 1.5vw; }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body class="m-3">
        <form class="new-food container-fluid needs-validation" novalidate>
            <div class="row">
                <div class="new-food-form col-12 col-lg-10">
                    <div class="row">
                        <div class="col-12 col-lg-4 d-flex align-items-center">
                            <label for="new-food-name${uniqueId}">Name:</label>
                            <input class="form-control new-food-name" required type="text" id="new-food-name${uniqueId}" placeholder="Food name">
                        </div>
                        <div class="col-12 col-lg-4 d-flex align-items-center">
                            <label for="new-food-calories${uniqueId}">Calories:</label>
                            <input class="form-control new-food-calories" required type="number" id="new-food-calories${uniqueId}" placeholder="Calories (in grams, only numbers)">
                        </div>
                        <div class="col-12 col-lg-4 d-flex align-items-center">
                            <label for="new-food-proteins${uniqueId}">Proteins:</label>
                            <input class="form-control new-food-proteins" required type="number" id="new-food-proteins${uniqueId}" placeholder="Proteins (in grams, only numbers)">
                        </div>
                        <div class="col-12 col-lg-4 d-flex align-items-center">
                            <label for="new-food-carbs${uniqueId}">Carbs:</label>
                            <input class="form-control new-food-carbs" required type="number" id="new-food-carbs${uniqueId}" placeholder="Carbs (in grams, only numbers)">
                        </div>
                        <div class="col-12 col-lg-4 d-flex align-items-center">
                            <label for="new-food-fats${uniqueId}">Fats:</label>
                            <input class="form-control new-food-fats" required type="number" id="new-food-fats${uniqueId}" placeholder="Fats (in grams, only numbers)">
                        </div>
                        <div class="col-12 col-lg-4 d-flex align-items-center">
                            <label for="new-food-portion${uniqueId}">Portion:</label>
                            <select class="form-select new-food-portion" required id="new-food-portion${uniqueId}">
                                <option selected disabled>Select portion type</option>
                                <option value="1 unit">1 unit</option>
                                <option value="100 g">100 g</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="new-food-buttons col-12 col-lg-2">
                    <div class="row">
                        <button class="cancel-new-food col-5 col-lg-12 btn btn-danger" type="button">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"></path>
                                <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"></path>
                            </svg> Cancel
                        </button>
                        <button class="confirm-new-food col-5 col-lg-12 btn btn-success" type="submit">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                            <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                            </svg> Create
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </body>
</html>

上一个：滚动条不会一直延伸到配置文件

下一个：文本幻灯片显示动画