如何通过CSS实现项目符号与内容（Email Us）的居中对齐？

Hey there! To get that icon (your "bullet point") and the "Email Us" text vertically centered, here's how you can adjust your CSS based on the code you provided:

方案一：使用Flexbox（推荐，现代布局方案） #

Flexbox是实现元素对齐最简洁的方式，我们只需要给包含图标和文本的父容器添加flex布局，并设置垂直对齐属性：

/* 给父容器添加flex布局，实现子元素垂直居中 */
.columbia-article-topic-category .mt-listing-detailed-subpages .mt-listing-article-list .mt-show-more-listing {
  display: flex;
  align-items: center; /* 核心：垂直居中所有子元素 */
  /* 如果你需要整个行（图标+文本）水平居中，加上下面这行 */
  /* justify-content: center; */
}

/* 调整图标的margin，移除auto避免干扰flex对齐，只保留右侧间距 */
.columbia-article-topic-category .mt-listing-detailed-subpages .mt-listing-article-list .mt-show-more-listing [class*='mt-icon-article'] {
  margin: 0 .4em 0 0;
  /* 确保图标自身内部的伪元素也居中 */
  display: inline-flex;
  align-items: center;
}

/* 完善伪元素样式，补充width确保是圆形，添加content（如果之前没写的话） */
.columbia-article-topic-category .mt-listing-detailed-subpages .mt-listing-article-list .mt-show-more-listing [class*='mt-icon-article']:before {
  display: block;
  background: #000;
  border-radius: 50%;
  height: .6em;
  width: .6em;
  content: '';
}

方案二：使用行高+垂直对齐（兼容旧浏览器） #

如果需要兼容不支持Flexbox的旧浏览器，可以用行高和vertical-align属性来实现：

/* 给父容器设置与文本匹配的行高 */
.columbia-article-topic-category .mt-listing-detailed-subpages .mt-listing-article-list .mt-show-more-listing {
  line-height: 1.5; /* 调整为你实际文本的行高 */
  /* 如需整体水平居中，添加这行 */
  /* text-align: center; */
}

/* 设置图标垂直对齐到文本中间，重置行高避免继承父元素高度 */
.columbia-article-topic-category .mt-listing-detailed-subpages .mt-listing-article-list .mt-show-more-listing [class*='mt-icon-article'] {
  margin: 0 .4em 0 0;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
}

/* 确保伪元素在图标容器内居中 */
.columbia-article-topic-category .mt-listing-detailed-subpages .mt-listing-article-list .mt-show-more-listing [class*='mt-icon-article']:before {
  display: block;
  background: #000;
  border-radius: 50%;
  height: .6em;
  width: .6em;
  content: '';
  margin: auto;
}

原理说明 #

• Flexbox方案：align-items: center会让容器内所有子元素在垂直方向上居中对齐，不管元素的高度差异，是现代布局的首选。
• 行高方案：通过设置父元素行高与文本行高一致，再用vertical-align: middle让图标对齐到文本的中线，适合需要兼容老旧环境的场景。

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