如何实现Glyphicon图标与文本居中对齐？仅调整文本位置

你之前用padding和margin调整时会同时移动图标和文本，核心问题在于结构不合理，以及用了负margin这种不稳定的调整方式。下面提供两种可靠的解决方案：

方案一：Flex布局（推荐，适配性更强） #

修改CSS和HTML结构，利用flex的垂直居中特性实现对齐：

修改后的CSS #

.quick-links{
    margin-left: 15px;  
    line-height: 2;
    font-family: 'arial rounded MT';
    border:1px solid;
}
.quick-link-text a{
    display: inline-flex;
    align-items: center; /* 让子元素垂直居中 */
    font-weight:500;
    text-decoration: none;
}

.quick-link-text a:hover{
    font-weight: bold;
}

.glyphicon-plus-sign{
    font-size:24px;
    margin-right: 8px; /* 图标和文本之间留间距 */
}

.text-position{  
    font-size:18px;    
}

修改后的HTML #

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">

<div class="quick-links col-lg-4 col-md-4">
    <h3>Quick Links</h3>
    <div class="quick-link-text">
        <a href="#">
            <span class="glyphicon glyphicon-plus-sign"></span>
            <span class="text-position">First Link</span>
        </a>          
    </div>
    <div class="quick-link-text">
        <a href="#">
            <span class="glyphicon glyphicon-plus-sign"></span>
            <span class="text-position">Second Link</span>
        </a>
    </div>
</div>

方案二：vertical-align属性 #

如果不想用flex，也可以通过vertical-align: middle实现对齐：

修改后的CSS #

.quick-links{
    margin-left: 15px;  
    line-height: 2;
    font-family: 'arial rounded MT';
    border:1px solid;
}
.quick-link-text a{
    font-weight:500;
    text-decoration: none;
}

.quick-link-text a:hover{
    font-weight: bold;
}

.glyphicon-plus-sign{
    font-size:24px;
    vertical-align: middle;
    margin-right: 8px;
}

.text-position{  
    font-size:18px;    
    vertical-align: middle;
}

HTML结构同上 #

同样需要把图标和文本放在同级的span标签中，确保两者都能应用垂直对齐属性。

关键调整说明 #

1. 重构HTML结构：将图标和文本拆分为同级元素，避免之前用div嵌套导致的布局耦合问题。
2. 去掉负margin和不必要的padding：这类hack式调整容易引发兼容性问题，用flex或vertical-align更稳定。
3. 统一hover效果：用bold替代font-weight:1000，适配更多字体的字重支持。

内容的提问来源于stack exchange，提问作者Salman Abbas