Bootstrap 中心元素的文本

gtlvzcf8 于 2023-11-15 发布在 Bootstrap

关注(0)|答案(2)|浏览(150)

正如你所看到的，目前标签显示在输入的左上角-当在开发工具中检查标签元素时，我可以看到标签与输入元素具有相同的高度和位置，但由于某种原因，标签的文本显示在元素的顶部。
我如何集中所说的文本，在某种程度上，它是集中在其标签元素，并显示到输入字段的中心左侧？

.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; }
}

个字符

twitter-bootstrap

来源：https://stackoverflow.com/questions/77411508/center-elements-text

2条答案

按热度按时间

relj7zay1#

如果这是您正在尝试实现的：x1c 0d1x
由于您使用的是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">

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

赞(0）回复(0）举报 2023-11-15

eh57zj3b2#

根据accepted answer，你可以添加类align-items-center来实现这一点，但请注意，你在.new-food-form input上的margin-bottom: 1.5vw;会使事情变得不协调，所以你也应该将这种风格应用到.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; }
}

个字符

赞(0）回复(0）举报 2023-11-15

我来回答

Bootstrap 中心元素的文本

2条答案

相关问题

热门标签

最新问答