vertical-alignment 相关问题

通常是与垂直平面中的接口项的放置相关联的样式或其他UI定义。

在 Bootstrap 4 表中垂直对齐复选框

我有一个 Bootstrap 4 表,如下所示: 这是一个单元格的 HTML: 我有一个 Bootstrap 4 表,看起来像这样: 这是单元格的 HTML: <td id="Cell-1" class="text-center"> <label><input class="form-check-input" type="checkbox" id="Check-1" value="" aria-label="..."></label> </td> 我希望复选框位于单元格的中间(垂直)并且标签填充整个单元格。 我试图给标签设置 100% 的高度,但这没有用。

回答 0 投票 0

100% 高度的 boostrap 列中的垂直中心内容

列需要是行的整个高度,但内容(文本)仍然需要垂直居中。 <... 列需要是行的整个高度,但内容(文本)仍然需要垂直居中。 <div class="row fixed-bottom mobile-navbar align-items-center"> <router-link to="/" class="col h-100">Home</router-link> <router-link to="/scan" class="col h-100">Scan</router-link> <router-link to="/account" class="col h-100">Account</router-link> </div> 我该怎么做? 我尝试将 span 放在 a 元素内并使用 py-auto,但这似乎并不能解决问题。 h-100 取其所在对象的 100% 大小,因此它不能居中,因为它是 100% 垂直的。 删除 h-100s 并为容器提供以下 css 或类。 必须是: <div class="row h-100 align-items-center" > //must be bigger than router height you can write min height:200px; <router-link to="/" class="col ">Home</router-link> <router-link to="/scan" class="col ">Scan</router-link> <router-link to="/account" class="col">Account</router-link> </div> 替代方案: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <div class="row d-flex align-items-center border" style="height:500px;"> <div class="col border">1</div> <div class="col border">2</div> <div class="col border">3</div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> </body> </html>

回答 1 投票 0

与文本对齐的垂直线

我正在尝试在 html/css 中练习编码不同的东西。 我希望我能成功编写代码,但我被卡住了。 我希望这些点与大标题对齐,并且在电话模式下,

回答 1 投票 0

Bootstrap 垂直对齐图像

在这个网站上:http://www.livenews.surf/ 我想让新闻图片和文字垂直居中对齐,我该怎么做?

回答 3 投票 0

无法正确对齐输入文本与单选按钮

HTML 你会推荐这个网站吗? HTML <fieldset> <label id="radio-buttons">Would you recommand this website? <input type="radio" name="radio" value="button" class="inline" checked>Yes</input> <input type="radio" name="radio" value="button" class="inline">No</input> <input type="radio" name="radio" value="button" class="inline">Maybe</input> </label> </fieldset> CSS input{ margin: 5px 0 0 0; width: 100%; min-height: 1.3em; } .inline{ width: unset; margin: 0 0.5em 0 0; vertical-align: middle; } 我尝试将单选按钮与文本本身对齐,但按钮最终比文本高出几个像素,我尝试了所有我能在网上找到的东西,但没有任何效果。 这可能是由 <label> 或 <fieldset> 元素上的默认填充或边距引起的。 尝试在您的 CSS 中为这些元素将 padding 和 margin 设置为 0,看看是否有帮助。 label, fieldset { padding: 0; margin: 0; } 如果没有,您可以尝试调整 .inline 类的 line-height 属性,直到文本和单选按钮按照您想要的方式对齐。 例如: .inline { line-height: 1.3em; /* rest of CSS */ } min-height 偏移你的对齐方式。你可以放下它,一切都很好。 你也可以摆脱垂直对齐。 在那种情况下,你需要重新做整个事情。这是一个快速修复。这里有更多关于如何在未来正确设置它的信息:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset p { margin: 0; /* optional, for the sake of SO editing */ } <fieldset> <p>Would you recommand this website?</p> <input type="radio" name="radio" value="button" id="yes" checked> <label for="yes">Yes</label><br> <input type="radio" name="radio" value="button" id="no"> <label for="no">No</label><br> <input type="radio" name="radio" value="button" id="maybe"> <label for="maybe">Maybe</label><br> </fieldset> <Label> 和 <input> 这样不行。 这种方式点击Yes,No或Maybe将影响他们各自的单选框。 fieldset { width : fit-content; min-width : 20em; } label { display : inline-block; margin : .3em 2rem 0 0; } <fieldset> <legend> Would you recommand this website? </legend> <label> <input type="radio" name="radio" value="Yes" checked > Yes </label> <label> <input type="radio" name="radio" value="No" > No </label> <label> <input type="radio" name="radio" value="Maybe" > Maybe </label> </fieldset>

回答 3 投票 0

如何在 R 中对齐注释

我有一个问题:有没有什么方法(函数、键盘快捷键、插件或类似的东西)可以让我以实用的方式在 R 中的代码旁边对齐注释? 我的意思是,我怎么能对齐...

回答 0 投票 0

如何垂直排列柱状图,使每个柱状图在不同的x数下获得相同的宽度。

我正在使用cowplot包来创建一个绘图网格。我的问题是当我想垂直绘制两个不同宽度的图时。下面是一个例子: library(dplyr) library(ggplot2) library(cowplot) ....

回答 2 投票 1

如何保证这个文字垂直居中不出div?[重复]

我有一个正方形的网格。每一个方块里面都有一个文本vertycally centered,但如果文本太长,就会从div中消失。我试着用属性 "word-wrap: break-word; "在table-cell类里面,但是......

回答 1 投票 0

我想在Flex项目中完美地将字体图标居中。

我有一个flex容器,里面有六个flex项目。我试图将包含字体-图标的锚标签(flex项的子元素)完美地放置在flex项的中心位置,所以我决定将锚标签设置为...

回答 2 投票 0

当我在 bootstarp 4 中使用 container-fluid 中的自定义类时,'row'中的 align-items 不工作?

我刚开始学习前端开发,在学习了html5css3的基础知识后,转而学习bootstrap4。现在,O一直在尝试制作facebook登录页面的副本,并使用了container-fluid ...

回答 1 投票 -1

用css初始化可内容的div光标的垂直对齐方式。

我有以下内容。#container { background-color: #ddd; width:150px; height: 150px; display: grid; vertical-align: middle; text-align: center; align-items: ...

回答 1 投票 0

垂直对齐

嗨,伙计们,希望你做得很好。所以我有问题的CSS,我真的不明白,但我把麝香超越我的极限,使它的工作。所以我有这4张卡:所以,如果你能看到...

回答 1 投票 0

垂直居中 itemcontent 在列中bootstrap [repicate] 。

我想把div标签的内容在列内居中,但这两种方法都不行。目前的结构是这样的。 在div里面,我有很多元素,我... I ...

回答 1 投票 0

布尔玛对齐按钮在一列的底部。

所以,我有一个困难的时间对齐按钮在我的Bulma的列的底部。我想让 "购买 "按钮位于红色框的底部。我在这种情况下,因为我所有的列内容......

回答 1 投票 0

移动设备上不正确的CSS行为

我想把我的登录和注册面板排在屏幕中间 它的工作原理很好,如果我检查它从PC和检查菜单,你可以选择任何手机,看看它是否正常工作。I ...

回答 1 投票 0

垂直对准一个<td>

我是个新手,所以如果这非常简单,我提前道歉。我正在做一个HTML邮件,并试图尽可能多地保持CSS内联。我已经附上了我的代码链接,就像现在这样:......

回答 1 投票 0

Flexbox:将文本垂直居中放置在其框内[复制] 。

我想用标签做标签,有时是两行。我一开始用的是ul的方法,但后来改用flexbox,希望能解决两个问题。(1)让标签的宽度填满...。

回答 2 投票 0

垂直对齐SVG文本条纹

我可以使用哪种SVG技术完美地垂直对齐文本条纹?此SVG使用rect制作水平条纹,并尝试在每个条纹上以完美的垂直对齐方式放置文本,但是......>

回答 1 投票 0

Bootstrap 4个垂直堆叠的按钮,每个按钮有两列左对齐的文本

在Bootstrap 4中,我如何创建一个垂直堆叠的按钮列表,其中每个按钮包含两列左对齐的文本?] >>

回答 1 投票 0

将div对准容器的底部

我正在使用基本CSS,并试图将div放在页面底部。我试过使用position:absolute;底部:0容器内有一个相对位置,但div ...

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.