如何实现SVG图标与文本对齐，让图标紧跟在文本右侧？

问题根因 #

你当前的布局错位有三个核心原因：

1. <div> 是块级元素，默认独占一行，你把SVG包裹在.top-button-blog__image这个div容器内，自然会换行到To top文本下方
2. .top-button-blog__text设置了固定width:80px、height:26px，容器宽度不足也会挤压内部内容换行
3. .top-button-blog__image设置的margin-bottom:20px完全冗余，还会额外占用垂直空间

修复方案 #

仅需要修改CSS代码即可实现效果，修改后的完整CSS如下：

.top-button-blog {
  z-index: 999;
  transition: opacity 0.5s;
  cursor: pointer;
  padding: 5px;
  position: fixed;
  top: 50%;
}

.top-button-blog__text {
  z-index: 999;
  text-transform: uppercase;
  /* 移除固定宽度限制，增加flex布局让内部元素横向排列、垂直居中 */
  display: inline-flex;
  align-items: center;
  height: 26px;
  color: #92969E;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 26px;
  text-align: left;
}

.top-button-blog__image {
  /* 移除冗余的底部外边距，增加左侧边距和文本分隔 */
  margin-left: 4px;
  line-height: 1;
}

HTML代码不需要做任何修改，保存刷新后就能看到SVG箭头紧跟在「To top」文本右侧，两者垂直居中对齐的效果。

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