为何vertical-align无法让SVG图标在标题中垂直居中？

你设置的vertical-align: middle之所以没效果，核心有两个原因：

• 浮动破坏了行内对齐规则：float: right会让SVG脱离正常文档流，而vertical-align只对行内元素、行内块元素或表格单元格生效，浮动元素不在这个范围内，所以这个属性完全起不了作用。
• flex布局与vertical-align不兼容：你给SVG加了display: flex，flex容器内部的对齐靠align-items等flex属性控制，vertical-align在flex元素上根本不生效，这两个属性本身就不搭。

要实现SVG在标题右侧、且和标题文本垂直居中的效果，应该给h1设置flex布局，让标题文本和SVG作为flex子项来对齐，代码调整如下：

CSS代码 #

h1 {
    border-bottom: 1px solid;
    display: flex; /* 把标题变成flex容器 */
    align-items: center; /* 子项垂直居中 */
    justify-content: space-between; /* 文本左对齐，SVG右对齐 */
}

.indicator {
    width: 24px;
    height: 24px;
    margin-left: 20px;
    /* 去掉float、display:flex、vertical-align这些没用的属性 */
}

HTML代码（修正SVG标签错误） #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>This is a title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>
        Heading 1
        <svg xmlns="http://www.w3.org/2000/svg" class="indicator">
            <path d="m16.01 7.43-1.4-1.41L9 11.6 3.42 6l-1.4 1.42 7 7 7-7Z"></path>
        </svg>
    </h1>
    <h1>
        The quick brown fox jumps over the lazy dog
        <svg xmlns="http://www.w3.org/2000/svg" class="indicator">
            <path d="m16.01 7.43-1.4-1.41L9 11.6 3.42 6l-1.4 1.42 7 7 7-7Z"></path>
        </svg>
    </h1>
    <h1>
        Heading 1
        <svg xmlns="http://www.w3.org/2000/svg" class="indicator">
            <path d="m16.01 7.43-1.4-1.41L9 11.6 3.42 6l-1.4 1.42 7 7 7-7Z"></path>
        </svg>
    </h1>
</body>
</html>

调整后不管标题是一行还是换行成多行，SVG都会始终和标题文本垂直居中，并且固定在右侧。另外注意：你原来的SVG用了src属性，这是img标签的属性，SVG需要用xmlns声明命名空间才能正常显示。

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