如何实现链接内图片与文本的垂直居中对齐？

开发者阿泽

2026-8-9

问题描述

尝试通过以下CSS和HTML代码，将图片与段落放置在<a>标签内，使用flex布局的.brandingWrapper类进行布局，但目前文本并未与logo垂直居中，需求为实现文本与logo处于同一高度的垂直居中对齐，该如何调整？

现有代码

CSS代码

.brandingWrapper {
  cursor: pointer;
  display: flex;
  height: 42px;
}

.apptitle {
  margin-left: 5px;
  font-size: 28px;
  font-family: 'apptitle';
  vertical-align: center;
  color: black;
}

a {
  color: #FFFFFF;
  text-decoration: none;
}

HTML代码

<div>
  <a class="brandingWrapper" href="/">
    <img class="applogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Wikipedia%27s_W.svg/128px-Wikipedia%27s_W.svg.png?20220824035851" width="42" height="42" />
    <p class="apptitle">Appname</p>
  </a>
</div>

实际显示效果

文本未与logo垂直居中的效果

解决方案

问题源于两个细节：

flex容器.brandingWrapper未设置垂直居中属性，flex布局需通过align-items: center实现子元素垂直居中；
<p>标签自带默认上下外边距，会导致文本偏移，需要清除这些默认边距。

修改后的CSS代码如下：

.brandingWrapper {
  cursor: pointer;
  display: flex;
  height: 42px;
  align-items: center; /* 新增：实现flex子元素垂直居中 */
}

.apptitle {
  margin-left: 5px;
  font-size: 28px;
  font-family: 'apptitle';
  color: black;
  margin-top: 0; /* 清除p标签默认上外边距 */
  margin-bottom: 0; /* 清除p标签默认下外边距 */
}

a {
  color: #FFFFFF;
  text-decoration: none;
}

另外，vertical-align: center对flex子元素无效，可直接删除，该属性仅适用于行内元素或表格单元格场景。