bootstrap 3中的垂直对齐字形图标

Posted 2023-03-06

【中文标题】bootstrap 3中的垂直对齐字形图标

【英文标题】：Vertical align glyphicon in bootstrap 3

【发布时间】：2014-05-08 07:08:34

【问题描述】：

我有一个像这样的字形图标：

<div class="col-xs-4 col-sm-2">
    <span class="glyphicon glyphicon-circle-arrow-up glyphicon-large"></span>
</div>

.glyphicon-large 
    min-height: 260px;
    font-size: 35px;
    width: 1em;
    display: block;
    top: 50%;
    margin: -0.5em auto 0px;

字形图标不会垂直对齐到中心。当我打开 Firefox、检查元素并关闭/打开 top 50% 规则时，它突然起作用了。怎么会？

【参考方案1】：

浏览器错误说明

根据MDN on top：

对于相对定位的元素（带有position: relative 的元素），它指定元素在其正常位置下方移动的量。注意：百分比应用为元素包含块高度的百分比

根据W3 on top：

对于相对定位的盒子，偏移量是相对于盒子本身的顶部边缘的（即，盒子在正常流程中被赋予一个位置，然后根据这些从该位置偏移特性）。 注意：百分比是指包含块的高度

这是我的猜测：

我认为正在发生的事情是，当browser is first rendering the visual tree 看到top:50%; 时，它会向父级设置高度。由于没有专门应用高度，也没有加载任何子内容，因此该 div（和所有 div）的高度实际上从零开始，除非另有说明。然后它将字形下推零的 50%。

稍后切换属性时，浏览器已经渲染了所有内容，因此父容器的计算高度由其子容器的高度提供。

最小、完整且可验证的示例

注意：这与 Bootstrap 或 Glyphicons 没有任何关系。为了避免对引导程序的依赖，我们将添加 top: 1px，这将由 .glyphicon 类应用。即使它被50% 覆盖，它仍然发挥着重要作用。

这是一组简单的父/子元素：

<div id="container">
    <div id="child">Child</div>
</div>

为了以更可重复的方式模拟切换属性，我们可以等待两秒钟，然后在 javascript 中应用这样的样式：

window.setTimeout(function() 
    document.getElementById("child").style.top = '50%';
,2000);

示例 1 (jsFiddle)

作为起点，让我们重新创建您的问题。

#container 
    position: relative;
    
    /* For Visual Effects */
    border: 1px solid grey;

#child 
    position: relative;
    height: 50px;
    top: 1px;
    
    /* For Visual Effects */
    border: 1px solid orange;
    width: 50px;
    margin: 0px auto;
    

请注意，一旦您调整窗口大小，浏览器就会重新绘制屏幕并将元素移回顶部。

示例 2 (jsFiddle)

如果您将top: 50% 添加到子元素，则在javascript 添加该属性时不会发生任何事情，因为它不会有任何内容可以覆盖。

示例 3 (jsFiddle)

如果您将top: 49% 添加到子元素，那么 DOM 确实需要更新一些东西，所以我们会再次遇到奇怪的故障。

示例 4 (jsFiddle)

如果您将 height: 50px; 添加到容器而不是子容器中，那么 top 属性从一开始就可以定位，您无需在 JavaScript 中使用切换。

---

如何垂直对齐

如果您只是想知道如何始终如一地垂直居中，那么您可以执行以下操作：

将文本垂直居中的技巧是将line-height 设置为等于容器高度。如果一行占 100 像素，而在线文本占 10 像素，那么浏览器将尝试将文本居中在剩余的 90 像素内，顶部和底部分别为 45。

.glyphicon-large 
    min-height:  260px;
    line-height: 260px;

Solution in jsFiddle

【讨论】：

您绝对可以将top 与relative 一起使用。它可能不会做你期望它做的事情，但实际上它已经明确定义了它应该做什么并且它确实做到了。

@Jasper，好点，你是对的。我用position: relative 和top: % 的解释更新了答案

【参考方案2】：

尝试将 H1 标记内的字形图标居中，这需要一段时间 - 所以我发现您实际上可以更改包含字形的 SPAN 标记内的字体大小和颜色。

因此：

<h1><span class="glyphicon glyphicon-envelope" style="font-size: 24px; color: #108db7;"></span>&nbsp;Mes Messages</h1>

确实适合我。

【参考方案3】：

你试过了吗？ ：

<span class="glyphicon glyphicon-circle-arrow-up glyphicon-large" style="vertical-align:middle"></span> 

【讨论】：

注意，这里提出的问题是为什么应用的样式在页面加载上不起作用。但它在使用浏览器开发工具手动关闭和打开top: 50% 属性后确实可以工作。 （@Ricoxor）