如何实现ul标签内div中的SVG图片垂直居中对齐

解决方案 #

方案1：仅修改CSS，无需调整HTML结构 #

只需修改#svg_dashboard_weather的样式，同时给其父容器添加相对定位即可实现效果：

1. 调整原有CSS代码：

#svg_dashboard_weather {
    width: 25px;
    height: 25px;
    /* 移除原有float:right，改用绝对定位控制位置 */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

2. 给包裹svg和文字的父div（即带overflow-hidden类的div）添加position: relative属性：

<div class="overflow-hidden" style="position: relative;">

原理是通过绝对定位将svg容器顶部先对齐父容器50%高度的位置，再通过transform: translateY(-50%)将自身向上偏移一半高度，实现精准垂直居中，文字换行不会影响居中效果。

方案2：利用Bootstrap自带类调整布局，无需额外写自定义CSS #

这种方案更符合Bootstrap的设计规范，后续维护更简单：

1. 移除#svg_dashboard_weather原有自定义CSS里的float: right、position: relative属性
2. 修改外层overflow-hidden的div，添加flex布局相关类：

<div class="d-flex align-items-center">

3. 给svg容器#svg_dashboard_weather添加ml-auto类，通过自动左外边距将svg推到右侧：

<div id="svg_dashboard_weather" class="d-flex ml-auto" title="5/5">

4. 给文字的<span>标签添加flex-grow-1类，保证文字自动换行，不会挤压svg的显示空间：

<span class="flex-grow-1">1 - Config.SlaveMinimumReplyDelay</span>

flex布局的align-items-center属性会自动将子元素垂直居中，文字自动换行时父容器高度变化，svg也会自动适配居中位置。

最终效果 #

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup