通常是与垂直平面中的接口项的放置相关联的样式或其他UI定义。
我希望按钮包含文本,我能够正确地格式化所有内容,但是当切换到Google字体时,字体样式本身似乎具有某种底部填充,我不确定如何摆脱它。 (请参见下图)我希望文本在按钮中垂直对齐。
当我限制图像的高度时,我会看到图像的顶部,但是我想看到图像的底部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <!-- Adding link for Bootstrap components --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Carousel of Photos --> <section id="Carousel"> <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="./Assets/Sea Two.jpg" class="d-block w-100" alt="Seafolly store front"> <div class="carousel-caption d-none d-md-block">[enter image description here](https://i.sstatic.net/JImBQG2C.jpg) </div> </div> <div class="carousel-item"> <img src="./Assets/Pat Nash Four.JPG" class="d-block w-100" alt="Patricia Nash in-store display"> <div class="carousel-caption d-none d-md-block"> </div> </div> <div class="carousel-item"> <img src="./Assets/DSCF1594 copy.jpg" class="d-block w-100" alt="Kaari Blue display"> <div class="carousel-caption d-none d-md-block"> </div> </div> <div class="carousel-item"> <img src="./Assets/Shakespeare Four.jpg" class="d-block w-100" alt="Interior of Shakespeare & Co. restaurant"> <div class="carousel-caption d-none d-md-block"> </div> </div> <div class="carousel-item"> <img src="./Assets/Cole Haan Grand Rapids.bmp" class="d-block w-100" alt="Cole Haan store interior"> <div class="carousel-caption d-none d-md-block"> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </section> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html>
如何垂直对齐一个输入装置,因此它保持在多行MUITextfield
使用React I有一个MUI多行野外文本,其中有几个输入的图标与右侧对齐。
有一种方法可以使用bbcode垂直对付文本? [img = 16] res://icon.png [/img] helloworld
我花了几天时间尝试垂直对齐 .sl_container。 我尝试过垂直对齐:中间,但这不起作用。 如果我指定 .slideshow 的高度和宽度,则使用 top: 50%...
我使用 subcaption 包来对齐两个子图。我对两个子图都使用了 t 选项进行垂直对齐,但到图没有正确对齐L 第一个图的顶部是相同的
我正在尝试创建一个潜在客户生成页面。我想在任何浏览器尺寸上显示时将页面上的所有内容集中到中心。 我尝试使用垂直居中对齐。但好像不是
如何为 TextBlock 内的文本指定垂直居中对齐?我找到了 TextAlignment 属性,但它用于水平文本对齐。如何实现垂直文本对齐?
我正在使用 PrimeVue Panel 元素和 tailwind。 我希望内容区域垂直居中。我不想改变标题,只改变内容区域。 我尝试过将 Flex items-cen...
我不是前端开发人员,我正在尝试创建一个非常简单的页面骨架,目前如下所示: 徽标与标题 div 的高度相同,右侧的所有内容都是
我是html新手,我正在为自己设置一个小网页。我正在尝试制作一个简单的页面,它只是一个 gif 导航栏作为按钮,每个按钮都会指向一个新页面。我有导航栏,...
我正在连续显示由 标签生成的具有固定高度和宽度的盒子数量。 现在我需要将文本垂直居中对齐。 CSS垂直对齐没有影响,也许...... 我正在连续显示由 标签生成的具有固定高度和宽度的盒子数量。 现在我需要将文本垂直居中对齐。 CSS垂直对齐没有影响,也许我错过了一些东西??? 我不是在寻找使用(边距、填充、行高)的技巧,这些技巧不起作用,因为有些文本很长并且会分成两行。 请找到实际代码: CSS代码 ul.catBlock{ width:960px; height: 270px; border:1px solid #ccc; } ul.catBlock li{ list-style: none; float:left; display:block; text-align: center; width:160px; height: 100px; } ul.catBlock li a{ display: block; padding: 30px 10px 5px 10px; height:60px; } HTML代码 <ul class="catBlock"> <li><a href="#">IP Phone</a></li> <li><a href="#">Dual SIM Switch Server</a></li> <li><a href="#">IP PBX</a></li> </ul> 使用 display: table 定义父元素,使用 vertical-align: middle 和 display: table-cell 定义元素本身。 无论这个回应可能晚了多少年,遇到此问题的任何人都可能只想尝试一下 li { display: flex; flex-direction: row; align-items: center; } 浏览器对 Flexbox 的支持比 @scottjoudry 在上面发布他的回复时要好得多,但如果您想支持更旧的浏览器,您可能仍然需要考虑前缀或其他选项。 caniuse:弯曲 2024 年 8 月更新: 在 2024 年更新此内容只是为了说明 align-content: center 可能是您正在寻找的东西,即使在 flexbox 之外,前提是您在块元素内部执行此操作。目前,浏览器支持仍然有限,但也许当您阅读本文时,您就会了解了! caniuse:对齐内容 line-height 是垂直对齐文本的方式。这是相当标准的,我不认为它是“黑客”。只需将 line-height: 100px 添加到您的 ul.catBlock li 即可。 在这种情况下,您可能必须将其添加到 ul.catBlock li a,因为 li 内的所有文本也位于 a 内。当你这样做时,我发现一些奇怪的事情发生了,所以尝试两者,看看哪一个有效。 未来这个问题将通过flexbox解决。目前浏览器支持很差,但所有当前浏览器都以一种或另一种形式支持。 浏览器支持:http://caniuse.com/flexbox .vertically_aligned { /* older webkit */ display: -webkit-box; -webkit-box-align: center; -webkit-justify-content: center; /* older firefox */ display: -moz-box; -moz-box-align: center; -moz-box-pack: center; /* IE10*/ display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center; /* newer webkit */ display: -webkit-flex; -webkit-align-items: center; -webkit-box-pack: center; /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */ display: flex; align-items: center; justify-content: center; } Flexbox 背景:http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 令人惊讶(或不令人惊讶)的是,vertical-align工具实际上最适合这项工作。 最重要的是,不需要 JavaScript。 在下面的示例中,我将 outer 类放置在主体的中间,并将 inner 类放置在 outer 类的中间。 预览:http://jsfiddle.net/tLkSV/513/ HTML: <div id="container"> <span></span><div class="outer"> <span></span><div class="inner"> </div> </div> </div> CSS: html, body { height: 100%; margin: 0; padding: 0; } #container { text-align: center; height: 100%; } span { height: 100%; vertical-align: middle; display: inline-block; } .outer { width: 100px; height: 200px; padding: 0; border: 1px solid #000; vertical-align: middle; display: inline-block; } .inner { background: red; width: 30px; height: 20px; vertical-align: middle; display: inline-block; } 垂直对齐的工作原理是对齐彼此相邻的元素的中心。对单个元素应用垂直对齐绝对没有任何作用。如果您添加第二个没有宽度但与容器高度相同的元素,则单个元素将移动到该无宽度元素的垂直居中位置,从而使其垂直居中。唯一的要求是将两个元素设置为内联(或内联块),并将其垂直对齐属性设置为 vertical-align: middle。 注意:您可能会在下面的代码中注意到我的 <span> 标签和 <div> 标签是接触的。因为它们都是内联元素,所以空格实际上会在无宽度元素和 div 之间添加一个空格,因此请务必将其保留。 这里没有提供完美的答案,除了 Asaf 的答案,它没有提供任何代码或任何示例,所以我想贡献我的...... 为了使 vertical-align: middle; 工作,您需要对 display: table; 元素使用 ul,对 display: table-cell; 元素使用 li,然后可以对 vertical-align: middle; 元素使用 li。 您不需要提供任何明确的 margins、paddings 即可使文本垂直居中。 演示 ul.catBlock{ display: table; width:960px; height: 270px; border:1px solid #ccc; } ul.catBlock li { list-style: none; display: table-cell; text-align: center; width:160px; vertical-align: middle; } ul.catBlock li a { display: block; } 如此处所述:https://css-tricks.com/centering-in-the-unknown/。 经实际测试,最可靠且优雅的解决方案是在 <li /> 元素中插入一个辅助内联元素作为第一个子元素,其高度应设置为 100%(其父元素的高度,即 <li />) ),并将其 vertical-align 设置为中间。要实现这一点,您可以放置一个 <span />,但最方便的方法是使用 li:after 伪类。 截图: ul.menu-horizontal { list-style-type: none; margin: 0; padding: 0; display: inline-block; vertical-align: middle; } ul.menu-horizontal:after { content: ''; clear: both; float: none; display: block; } ul.menu-horizontal li { padding: 5px 10px; box-sizing: border-box; height: 100%; cursor: pointer; display: inline-block; vertical-align: middle; float: left; } /* The magic happens here! */ ul.menu-horizontal li:before { content: ''; display: inline; height: 100%; vertical-align: middle; } 垂直对齐中间的简单解决方案......对我来说它就像一个魅力 ul{display:table; text-align:center; margin:0 auto;} li{display:inline-block; text-align:center;} li.items_inside_li{display:inline-block; vertical-align:middle;} 尝试一下这个解决方案 在大多数情况下效果最好 您可能必须使用 div 而不是 li .DivParent { height: 100px; border: 1px solid lime; white-space: nowrap; } .verticallyAlignedDiv { display: inline-block; vertical-align: middle; white-space: normal; } .DivHelper { display: inline-block; vertical-align: middle; height:100%; } <div class="DivParent"> <div class="verticallyAlignedDiv"> <p>Isnt it good!</p> </div><div class="DivHelper"></div> </div>
我在 标签内有以下 : 是 这些是他们的 CSS 类: #AlertDiv { 立场:绝对... 我在 <div> 标签内有以下 <body>: <div id="AlertDiv"><h1>Yes</h1></div> 这些是他们的 CSS 类: #AlertDiv { position:absolute; height: 51px; left: 365px; top: 198px; width: 62px; background-color:black; color:white; } #AlertDiv h1{ margin:auto; vertical-align:middle; } 如何在 <h1> 内部垂直和水平对齐 <div>? AlertDiv 会比 <h1> 大。 如果您知道它只会是一行,则可以将 line-height:51px 添加到 #AlertDiv h1。还将 text-align:center 添加到 #AlertDiv。 #AlertDiv { top:198px; left:365px; width:62px; height:51px; color:white; position:absolute; text-align:center; background-color:black; } #AlertDiv h1 { margin:auto; line-height:51px; vertical-align:middle; } 下面的演示还使用负边距来保持 #AlertDiv 在两个轴上居中,即使在调整窗口大小时也是如此。 演示:jsfiddle.net/KaXY5 在 hX 标签上 width: 100px; margin-left: auto; margin-right: auto; 有一种使用变换的新方法。将其应用于居中的元素。它将容器高度向下微移一半,然后“纠正”元素高度的一半。 position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); 大部分时间都有效。我确实遇到了一个问题,其中 div 位于 div 中,li 中。列表项设置了高度,外部 div 组成 3 列(基础)。第二列和第三列 div 包含图像,并且使用这种技术可以很好地居中,但是第一列中的标题需要一个具有明确高度设置的包装 div。 现在,有人知道 CSS 人员是否正在研究一种轻松对齐内容的方法吗?看到现在已经是 2014 年了,甚至我的一些朋友也经常使用互联网,我想知道是否有人认为居中将是一个有用的样式功能。那么只有我们吗? 开始了jsFiddle这里。 看起来水平对齐可以与text-align : center配合使用。 仍在尝试让垂直对齐工作;可能必须使用 absolute 定位和类似 top: 50% 或从顶部预先计算的 padding。 <div id="AlertDiv" style="width:600px;height:400px;border:SOLID 1px;"> <h1 style="width:100%;height:10%;text-align:center;position:relative;top:40%;">Yes</h1> </div> 您可以在这里尝试代码: http://htmledit.squarefree.com/ 您可以向 h1 添加填充: #AlertDiv h1 { padding:15px 18px; } 您可以使用 display: table-cell 将 div 渲染为表格单元格,然后像在普通表格单元格中一样使用 vertical-align。 #AlertDiv { display: table-cell; vertical-align: middle; text-align: center; } 您可以在这里尝试: http://jsfiddle.net/KaXY5/424/ 如何在 <h1> 内垂直和水平对齐 <div>? text-align: center; 水平居中 h1 文本 自 2024 年起(请参阅“如何将 H1 垂直居中于 div?”),align-content: center; 将在 h1 内对齐 div。 参见 jsfiddle 和下面的代码片段: #AlertDiv { position:absolute; height: 71px; left: 365px; top: 98px; width: 92px; background-color:black; color:white; align-content: center; /* vertical centering*/ text-align: center; } #AlertDiv h1{ margin:auto; } <div id="AlertDiv"><h1>Yes</h1></div>
这个问题的变体已经被问过很多次了。 CSS 垂直居中是一个挑战。 我有一个特殊的场景,处理水平显示的列表。标记就像...
我需要创建一个简单的导航栏,没有搜索框,只有徽标和旁边的链接,并且我不允许使用浮动或弹性框,这是代码: .nav-标志 img{ 高度:48像素; 显示:内联块;
top 50%和translateY(-50%)没有按预期工作
我正在尝试使用古老的技术垂直对齐div 顶部:50%; 变换:翻译Y(-50%); 但它没有像我预期的那样工作。我想知道这里的问题可能是什么。 我
我无法将引导星形图标置于我正在设计的网站中评论文本旁边的中心。我将 svgs 嵌入到我的代码中。我在这里也使用一些 Bootstrap 4 类作为上下文。方法如下
为什么CSS的vertical-align: middle公式不起作用?来自 MDN 文档的那个
img, 跨度, 身体 { 显示:内联块; 字体系列:Arial; 内边距:0px; 边距:0 像素; 垂直对齐:居中; } 图像{ 垂直对齐:居中; } 跨度{ 背景颜色:蓝色; 字体...
为什么 CSS 垂直对齐:中间论坛不起作用?来自 MDN 文档的那个
img, 跨度, 身体 { 显示:内联块; 字体系列:Arial; 内边距:0px; 边距:0 像素; 垂直对齐:居中; } 图像{ 垂直对齐:居中; } 跨度{ 背景颜色:蓝色; 字体...
“vertical-align: middle”将图像对齐到文本的哪一点?公式是什么?
图像, 跨度, 身体 { 显示:内联块; 字体系列:Arial; 内边距:0px; 边距:0 像素; } <style> img, span, body { display: inline-block; font-family: Arial; padding: 0px; margin: 0px; } </style> <body> <img src="https://placehold.co/200" style="vertical-align:middle;"> <span style=" background-color:blue; font-size:36px; ">Sample Text</span> </body> 这里图像垂直偏移到底是怎么计算的,什么公式? 根据我的理解,图像中的 vertical-align:middle 应该将其垂直中点移动到文本的某个特定点,但具体如何移动呢? 我真的不知道你在哪里找到了转变,图像很好地垂直放置在文本的中间(在2x的中心或在2e的栏上) body { font-family: Arial; font-size : 36px; } svg { width : 200px; background : yellow; vertical-align : middle; } span { background : lightblue; } <span>Sample Text</span> <svg viewbox="0 0 200 200"> <line x1="0" y1="100" x2="200" y2="100" stroke="black" /> </svg> <span>Sample Text</span>