元素无法上移求助：如何调整图片旁文本的垂直位置？

问题截图 #

你现在的问题是右侧“Opening Hour”文本和旁边的时钟图标无法对齐，调整padding-bottom也没用，核心原因是布局里的负边距、不合理的padding设置以及inline-block元素的默认对齐方式导致的。

解决方案 #

• 删掉.right-section的margin-top: -70px，这个负边距会把整个右侧模块往上拉，打乱正常布局
• 给.right-section li加上vertical-align: middle，让图标和文本垂直居中对齐
• 移除.pp1的padding-right: 80%，这个属性会让文本被强制挤到左侧，占用多余空间
• 调整figure布局为flex，替代原来的负margin实现图标居中，避免布局混乱

修改后的CSS代码 #

section {
  margin-top: 0px;
  width: 100%;
  overflow: hidden;
  background-color: #ffffff;
  height: auto;
}

section ul li {
  display: inline-block;
}

.left-section {
  float: left;
  width: 40%;
}

.right-section {
  float: right;
  width: 58%;
  text-align: right;
  height: auto;
}

.right-section li {
  vertical-align: middle;
}

.pp {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  color: #3b6cff;
  font-size: 38px;
  padding: 15px;
  margin-bottom: 11px;
}

figure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  font-size: 12px;
  margin-right: 10px;
  background: #fff;
  border: 1px solid #ccc;
}

figure img {
  width: 22px;
  height: auto;
}

.sp1 {
}

.pp1 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

修改后的HTML代码 #

<section>
  <ul class="left-section">
    <li><img class="prog" src="images/programming.png" alt=""></li>
    <li class="pp">DGcom</li>
  </ul>

  <ul class="right-section">
    <li class="sp1">
      <figure>
        <img src="images/clk.png" alt="">
      </figure>
    </li>
    <li class="pp1">Opening Hour</li>
  </ul>
</section>

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