如何用CSS实现图标与文本上下对齐？已尝试float等属性无效

嘿，我来帮你搞定这个问题！你要实现两个核心需求：图标和文本垂直对齐，还有每个地址项单独占一行，对吧？我给你两个实测有效的方案，比你之前试的float、clear要更直接靠谱~

方案一：Flex布局（推荐，现代浏览器友好） #

这种方式代码简洁，还能轻松控制间距和对齐效果：

/* 父容器设置垂直方向的Flex布局，强制每个子项自动换行 */
.post-options {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 可选：给每个地址项之间加一点间距，视觉上更舒服 */
}

/* 每个地址项内部用Flex实现图标和文本的垂直居中对齐 */
.cs-location {
  display: flex;
  align-items: center;
}

/* 可选：给图标加个右边距，和文本拉开点距离 */
.cs-location .icon-map-marker {
  margin-right: 8px;
}

方案二：块级元素+垂直对齐（兼容旧浏览器） #

如果需要兼容IE这类老旧浏览器，可以用这种传统实现方式：

/* 把每个地址项变成块级元素，自动独占一行 */
.cs-location {
  display: block;
  margin-bottom: 10px; /* 可选：项之间的间距 */
}

/* 让图标和文本垂直居中对齐 */
.cs-location .icon-map-marker {
  vertical-align: middle;
  margin-right: 8px;
}

为啥之前的float/clear没效果？ #

因为你的.cs-location是<span>标签（行内元素），就算加了float，默认还是会横向排列；clear只有在浮动元素之后才会生效，这种方式不仅麻烦，还容易出现布局塌陷的问题，不如直接把元素改成块级或者用Flex布局来得直接可靠~

内容的提问来源于stack exchange，提问作者Shafa Aijaz Ahmed