如何在UIKit中让文本与图标垂直居中（少改HTML结构）

要在最小修改HTML结构的前提下完成需求，你可以通过以下两步调整：

1. 微调HTML结构（仅添加一个容器） #

给姓名和公司名的文本部分套一个inline-block容器，既能单独控制文本行间距，也方便和图标实现垂直对齐：

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.15.24/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.24/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.24/dist/js/uikit-icons.min.js"></script>


<div class="uk-inline uk-text-small">
  <span class="user-info">
    <b>Jelle Botman</b><br/>
    My Company
  </span>
  <span class="uk-icon-button uk-margin-small-right" uk-icon="user"></span>
  <div uk-dropdown>
    <a href=''>Profiel</a><br/>
    <a href=''>Uitloggen</a>
  </div>
</div>

2. 添加自定义CSS #

通过CSS实现垂直居中并缩小文本行间距：

.user-info {
  display: inline-block;
  vertical-align: middle; /* 与右侧图标实现垂直居中对齐 */
  line-height: 1.2; /* 缩小姓名和公司名的行间距，可根据需求调整数值 */
  margin-right: 8px; /* 可选：给文本和图标之间增加间距，提升视觉舒适度 */
}

原理说明 #

• display: inline-block让文本容器和图标（uk-icon-button默认是inline-block）处于同一对齐语境，此时vertical-align: middle才能生效
• 调整line-height直接控制两行文本的间距，替代uk-text-small默认偏大的行高
• 整个修改仅新增了一个<span>容器和几行CSS，完全保留原有HTML结构的逻辑

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