vertical-alignment 相关问题

我正在连续显示由标签生成的具有固定高度和宽度的盒子数量。现在我需要将文本垂直居中对齐。 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>

html css vertical-alignment

回答 9 投票 0

将 <h1> 标签置于 <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>

html css alignment vertical-alignment

回答 8 投票 0

如何使用 CSS 将文本在 LI 内的锚点中垂直居中？

这个问题的变体已经被问过很多次了。 CSS 垂直居中是一个挑战。我有一个特殊的场景，处理水平显示的列表。标记就像...

css vertical-alignment

回答 6 投票 0

内联块不适用于图像及其后面的列表

我需要创建一个简单的导航栏，没有搜索框，只有徽标和旁边的链接，并且我不允许使用浮动或弹性框，这是代码： .nav-标志 img{ 高度：48像素；显示：内联块；

html css html-lists vertical-alignment display

回答 1 投票 0

top 50%和translateY(-50%)没有按预期工作

我正在尝试使用古老的技术垂直对齐div 顶部：50%；变换：翻译Y(-50%)；但它没有像我预期的那样工作。我想知道这里的问题可能是什么。我

flexbox alignment vertical-alignment

回答 1 投票 0

我无法让引导图标在文本旁边垂直居中

我无法将引导星形图标置于我正在设计的网站中评论文本旁边的中心。我将 svgs 嵌入到我的代码中。我在这里也使用一些 Bootstrap 4 类作为上下文。方法如下

html css svg bootstrap-4 vertical-alignment

回答 1 投票 0

为什么CSS的vertical-align: middle公式不起作用？来自 MDN 文档的那个

img，跨度，身体 { 显示：内联块；字体系列：Arial；内边距：0px；边距：0 像素；垂直对齐：居中； } 图像{ 垂直对齐：居中； } 跨度{ 背景颜色：蓝色；字体...

html css alignment vertical-alignment text-alignment

回答 1 投票 0

为什么 CSS 垂直对齐：中间论坛不起作用？来自 MDN 文档的那个

html css alignment vertical-alignment text-alignment

回答 1 投票 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>

html css alignment vertical-alignment text-align

回答 1 投票 0

为什么垂直对齐不精确以及它到底是如何工作的？图片+文字情况

示例文本 <img src="https://placehold.co/200" style="vertical-align:top;"> <span style=" background-color:blue;font-size:36px ; ">Sample Text</span> <br> <br> <img src="https://placehold.co/200" style="vertical-align:middle;"> <span style=" background-color:blue;font-size:36px ; ">Sample Text</span> <br> <br> <img src="https://placehold.co/200" style="vertical-align:bottom;"> <span style=" background-color:blue;font-size:36px ; ">Sample Text</span> 这里vertical-align只用在图像上，而不用在文本上。为什么垂直对齐在 :top 和 :bottom 的情况下会跳过 1 个像素，而在 :middle 的情况下却有奇怪的位置？以下是我期望它如何工作与实际如何工作的图像： 1。默认（垂直对齐：基线） 2。期望与现实（垂直对齐：中间）正如有人在另一个主题中所说，偏移量应该等于图像高度 + 基线的 1/2。但事实并非如此。很奇怪，我不明白它是如何工作的。 3.期望与现实（垂直对齐：顶部）正如您所看到的，此处的文本比我的预期低了 1 个像素。为什么会出现这种情况？我不明白规则，也没有在任何地方看到正确的完整解释（也尝试询问 ChatGPT）这是因为图像和 span 都是内联元素，默认情况下垂直对齐到 baseline。如果您将其 display 设置更改为 inline-block（或在其他情况下为 block），它们会正确对齐： img, span { display: inline-block; } <img src="https://placehold.co/200" style="vertical-align:top;"> <span style=" background-color:blue;font-size:36px ; ">Sample Text</span> <br> <br> <img src="https://placehold.co/200" style="vertical-align:middle;"> <span style=" background-color:blue;font-size:36px ; ">Sample Text</span> <br> <br> <img src="https://placehold.co/200" style="vertical-align:bottom;"> <span style=" background-color:blue;font-size:36px ; ">Sample Text</span>

css image alignment vertical-alignment text-alignment

回答 1 投票 0

CSS - 为什么在文本左侧的图像上使用垂直对齐时文本会垂直移动？

文字文字 ...

html css image alignment vertical-alignment

回答 1 投票 0

如何使用 Console.WriteLine 对齐列中的文本？

我有一种列显示，但最后两列似乎没有正确对齐。这是我现在的代码： Console.WriteLine("客户姓名" +“出售...

c# console tabs alignment vertical-alignment

回答 10 投票 0

如何在 tkinter Treeview 小部件中垂直居中行文本？

我的问题是，在下面的示例中，突出显示的行中的文本位于顶部并且不是垂直居中的。我想达到与CSS属性相同的效果&...