按钮内图片与文本对齐问题：文本居中且不受图片干扰

问题描述 #

我希望按钮内的文本完全不受图片影响，如同图片不存在一样居中显示；同时要将图片尺寸调整为1.5em，但调整后文本会向上向右偏移。刚接触这类开发，试过flex布局但完全破坏原有定位，之前标记为重复的问题方案也无法解决我的问题，元素对齐效果更差。

当前代码 #

CSS #

.ico {
  width: auto;
  height: 1em;
  vertical-align: middle;
  float: left;
}

.sideb {
  font-family: Impact, Arial, serif;
  font-size: 1.2em;
  line-height: 90%;
  height: 40px;
  width: 100%;
  margin: 2px auto;
  border-style: outset;
  border-color: #aaaa00;
  background-color: #eeee00;
}

.sidenav {
  height: 220px;
  vertical-align: top;
  background-color: #eecc00;
  width: 124px;
  top: 5px;
  left: 10px;
  padding: 8px 2px;
  border-style: solid;
  border-width: 1px;
  display: inline-grid;
  grid-column: 1 / span 1;
}

.currpage,
.currpage:hover,
.currpage:active {
  font-family: Impact, Arial, serif;
  font-size: 1.2em;
  line-height: 90%;
  height: 40px;
  width: 100%;
  margin: 2px auto;
  border-style: outset;
  border-color: #00aa00;
  background-color: #00ee00;
}

HTML #

<div class="sidenav">
  <img class="undcons" src="images/wip.gif" alt="Under Construction">
  <button class="currpage"><img class="ico" src="images/house.gif">HOME</button>
  <a href="vlogs.html">
    <button class="sideb"><img class="ico" src="images/camera.gif">VLOGS</button>
  </a>
  <a href="blogs.html">
    <button class="sideb"><img class="ico" src="images/book.gif">BLOGS</button>
  </a>
  <a href="about.html">
    <button class="sideb"><img class="ico" src="images/about.gif">ABOUT</button>
  </a>
</div>

修改方案 #

通过绝对定位脱离文档流让图片不影响文本布局，同时用flex让文本完美居中，具体修改如下：

调整后的CSS #

.ico {
  width: auto;
  height: 1.5em; /* 设置为目标尺寸1.5em */
  position: absolute; /* 脱离文档流，不占据文本布局空间 */
  left: 8px; /* 控制图片与按钮左侧的间距，可按需修改 */
  top: 50%;
  transform: translateY(-50%); /* 让图片垂直方向与文本对齐 */
}

.sideb {
  font-family: Impact, Arial, serif;
  font-size: 1.2em;
  line-height: 90%;
  height: 40px;
  width: 100%;
  margin: 2px auto;
  border-style: outset;
  border-color: #aaaa00;
  background-color: #eeee00;
  position: relative; /* 让图片的绝对定位以按钮为基准 */
  display: flex;
  align-items: center;
  justify-content: center; /* 文本水平垂直居中，完全不受图片影响 */
}

.sidenav {
  height: 220px;
  vertical-align: top;
  background-color: #eecc00;
  width: 124px;
  top: 5px;
  left: 10px;
  padding: 8px 2px;
  border-style: solid;
  border-width: 1px;
  display: inline-grid;
  grid-column: 1 / span 1;
}

.currpage,
.currpage:hover,
.currpage:active {
  font-family: Impact, Arial, serif;
  font-size: 1.2em;
  line-height: 90%;
  height: 40px;
  width: 100%;
  margin: 2px auto;
  border-style: outset;
  border-color: #00aa00;
  background-color: #00ee00;
  position: relative; /* 同样添加相对定位 */
  display: flex;
  align-items: center;
  justify-content: center; /* 文本居中 */
}

原理说明 #

1. 给按钮添加position: relative，让内部图片的绝对定位以按钮为参考容器
2. 图片设置position: absolute脱离文档流，彻底不干扰文本的布局空间
3. 按钮用flex布局的justify-content: center和align-items: center实现文本的完美居中
4. 图片通过top: 50% + transform: translateY(-50%)实现垂直方向与文本对齐，left属性灵活控制图片的水平位置

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