多行文本下:after伪元素垂直居中对齐问题求助

嘿，这个图标对齐的问题我太熟了！你现在的问题出在float: right上——这个属性会让图标脱离正常文档流，自然没法和多行文本保持垂直居中。下面给你两种简单好用的解决方法：

方法一：Flexbox布局（推荐） #

Flexbox是现代CSS布局的首选，代码简洁还兼容绝大多数现代浏览器（IE11及以上都支持）。只需要把.cl-text改成flex容器，就能轻松实现文本左对齐、图标右对齐且垂直居中的效果：

修改后的CSS #

#main-box {
  padding: 30px;
  border-radius: .25rem;
  background-color: rgba(255, 255, 255, 0.9);
  width: 80%;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.item .cl-title {
  font-weight: bold;
  margin-bottom: 15px;
}
.item .cl-text {
  font-style: italic;
  font-size: .75rem;
  /* 核心：设置为flex容器 */
  display: flex;
  justify-content: space-between; /* 文本左、图标右分布 */
  align-items: center; /* 垂直居中对齐 */
}
.item .cl-text:after {
  content: "V";
  color: Green;
  /* 删掉原来的float: right */
}

修正后的HTML（注意补全闭合标签，原结构有错误） #

<div id="main-box">
  <div class="checklist">
    <div class="item">
      <div class="cl-title">title</div>
      <div class="cl-text">some text <br/> some text<br/></div>
    </div>
    <div class="item">
      <div class="cl-title">title</div>
      <div class="cl-text">some text </div>
    </div>
  </div>
</div>

方法二：相对+绝对定位（兼容老浏览器） #

如果需要兼容IE10及以下，可以用相对定位+绝对定位的组合，通过transform: translateY(-50%)精准让图标垂直居中：

修改后的CSS #

#main-box {
  padding: 30px;
  border-radius: .25rem;
  background-color: rgba(255, 255, 255, 0.9);
  width: 80%;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.item .cl-title {
  font-weight: bold;
  margin-bottom: 15px;
}
.item .cl-text {
  font-style: italic;
  font-size: .75rem;
  position: relative; /* 作为绝对定位的父容器 */
  padding-right: 20px; /* 给图标预留空间，避免覆盖文本 */
}
.item .cl-text:after {
  content: "V";
  color: Green;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
}

不管你的文本是单行还是多行，用这两种方法都能让图标稳稳地垂直居中在右侧啦！

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