HTML与CSS中行内元素经典对齐问题求助

直接看修改后的代码，解决对齐问题同时保留你需要的交互效果：

修改后CSS #

ol, ul, li, menu {
  list-style: none;
  margin: 0;
  padding: 0; /* 清掉列表默认内外边距，避免布局跑偏 */
}

a {
  text-decoration: none;
  color: inherit; /* 继承父元素颜色，去掉链接默认蓝色 */
}

.social__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social__icon {
  display: flex; /* 用flex让图标和文字横向排 */
  align-items: center; /* 垂直居中对齐 */
  gap: 12px; /* 图标和文字间距设为12px */
  transition: all 0.25s linear;
}

/* 专门给图标加个容器放圆形背景 */
.social__icon .icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  background: rgba(196, 196, 196, 0.5);
  transition: all 0.25s linear;
}

.social__icon img {
  width: auto;
  height: 16px; /* 控制图标大小，别撑满圆形容器 */
}

.social__icon:active .icon-wrapper {
  background: #4B9200; /* 点击时只变图标背景 */
}

.social__icon:hover .icon-wrapper {
  animation: shake 500ms ease-in-out forwards; /* hover时图标抖动，要整个链接抖就改选择器为.social__icon:hover */
}

@keyframes shake {
  0% { transform: rotate(2deg); }
  50% { transform: rotate(-3deg); }
  70% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

修改后HTML #

<div class="social">
  <ul class="social__list">
    <li>
      <a class="social__icon" href="https://en-gb.facebook.com" target="_blank" rel="noopener">
        <div class="icon-wrapper">
          <img src="../../assets/icons/social/fb.svg" alt="Facebook">
        </div>
        <span>Facebook</span>
      </a>
    </li>
    <li>
      <a class="social__icon" href="https://twitter.com" target="_blank" rel="noopener">
        <div class="icon-wrapper">
          <img src="../../assets/icons/social/twtr.svg" alt="Twitter">
        </div>
        <span>Twitter</span>
      </a>
    </li>
    <li>
      <a class="social__icon" href="https://www.instagram.com" target="_blank" rel="noopener">
        <div class="icon-wrapper">
          <img src="../../assets/icons/social/inst.svg" alt="Instagram">
        </div>
        <span>Instagram</span>
      </a>
    </li>
    <li>
      <a class="social__icon" href="https://www.youtube.com" target="_blank" rel="noopener">
        <div class="icon-wrapper">
          <img src="../../assets/icons/social/youtube.svg" alt="Youtube">
        </div>
        <span>Youtube</span>
      </a>
    </li>
  </ul>
</div>

核心调整点 #

• 把.social__icon改成flex布局，直接实现图标和文字横向排列，垂直居中，间距一步到位。
• 给图标单独加了.icon-wrapper容器，把圆形背景、固定宽高放到这，避免原来的宽高限制把文字挤没。
• 清掉列表默认内外边距，修正链接默认颜色，避免浏览器样式干扰。
• 把hover动画绑定到图标容器，抖动效果更精准，要整个链接抖的话改下选择器就行。
• 调整active状态只改图标背景，逻辑更合理。

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