为何给.col内SVG设置text-align:left后无法居左？

首先明确：text-align是给容器元素设置的属性，直接给SVG添加text-align:left完全不会生效——这个属性的作用是控制块级容器内部行内/行内块内容的水平对齐，而非作用于元素本身。

针对你的场景，给出几种可行的解决方案：

方案1：修正容器的text-align设置（基础方法） #

如果你的HTML结构是.col容器内同时包含SVG和文本，比如：

<div class="col">
  <svg viewBox="0 0 24 24"><!-- 天气图标内容 --></svg>
  <span>多云 22℃</span>
</div>

正确的做法是给.col设置text-align:left，同时确保SVG和文本都是行内/行内块元素（默认SVG是inline，文本用span包裹也是inline，无需额外设置）：

.col {
  text-align: left; /* 让容器内所有行内内容左对齐 */
}

/* 可选优化：让SVG和文本垂直居中，同时添加间距 */
.col svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  width: 24px;
  height: 24px;
}

方案2：修复SVG的display属性 #

如果你的SVG被意外设置成了display:block，它会独占一行，自然无法和文本并排。此时需要调整SVG的显示模式：

.col svg {
  display: inline-block; /* 改为行内块，允许和文本并排 */
  vertical-align: middle;
}

.col {
  text-align: left;
}

方案3：用Flex布局实现更灵活的控制（推荐） #

如果需要更精准的布局控制，Flex布局比text-align更可靠，还能轻松处理垂直对齐：

.col {
  display: flex;
  align-items: center; /* 让SVG和文本垂直居中对齐 */
  gap: 8px; /* 控制SVG和文本之间的间距 */
  /* flex布局默认justify-content是flex-start，即左对齐，无需额外设置 */
}

.col svg {
  width: 24px;
  height: 24px;
}

为什么直接给SVG加text-align没用？ #

text-align属性仅作用于块级容器，用于控制其内部行内级内容（文本、inline/inline-block元素）的水平对齐方向。给SVG本身设置这个属性，相当于给一个非容器元素设置内容对齐，完全不会产生预期效果。

内容的提问来源于stack exchange，提问作者alessi.gg