如何在不移动文本的前提下，实现图标水平左对齐与垂直居中？

可以用两种方式实现你的需求：让图标水平左对齐且垂直居中，同时保持文本位置不变。

方法1：绝对定位法 #

给父元素设置相对定位，再通过绝对定位固定图标的位置，完全不影响文本的居中布局：

.leftpanel a {
  display: block;
  height: 65px;
  text-align: center;
  line-height: 65px;
  position: relative; /* 开启相对定位，作为图标的定位参考 */
}

.leftpanel a .icons {
  position: absolute;
  left: 10px; /* 可根据需求调整图标左侧间距 */
  top: 50%;
  transform: translateY(-50%); /* 实现垂直居中 */
}

方法2：Flex布局法 #

利用Flex的对齐特性，直接分配图标和文本的位置：

.leftpanel a {
  display: flex;
  align-items: center; /* 让所有元素垂直居中 */
  height: 65px;
}

.leftpanel a .icons {
  margin-left: 10px; /* 调整图标左侧间距 */
  margin-right: auto; /* 强制图标靠左 */
}

.leftpanel a span {
  margin: 0 auto; /* 让文本保持居中 */
}

对应的HTML需要把文本包裹在<span>标签中：

<div class="leftpanel">
  <img src="media/logo.png" class="logo">
  <a href="acceuil" class="acceuil"><img src="media/icons/home.png" class="icons"><span>acceuil</span></a>
  <a href="le-grand-salon" class="le-grand-salon"><img src="media/icons/sofa.png" class="icons"><span>le grand salon</span></a>
  <a href="boutique" class="boutique"><img src="media/icons/shop.png" class="icons"><span>boutique</span></a>
</div>

两种方法都能达成目标，你可以根据自己的代码习惯选择使用。

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