如何用CSS将SVG右对齐？尝试多种方法仍无效

你的问题出在定位对象错误和缺少定位上下文，下面给你拆解原因和解决方案：

为什么之前的方法无效？ #

你把position: absolute加在了<path>元素上（SVG内部的图形节点），这个元素的定位是相对于SVG容器（甚至整个页面，如果SVG没设置定位的话），而你尝试的display: flex、float: right都是作用在SVG元素本身的——但<path>已经脱离了SVG的布局流，这些自然无法影响它的位置。另外margin: 0 auto是水平居中的写法，和右对齐逻辑完全不符，绝对定位下这个属性也不会生效。

解决方案一：用Flex布局控制SVG位置（推荐） #

这种方法不需要用到绝对定位，直接通过父div的Flex布局把SVG推到右侧：

修改后的HTML（假设父结构是这样）： #

<div class="parent-container">
  <svg width="14" height="15" xmlns="http://www.w3.org/2000/svg">
    <path id="cross-icon" onclick="closeModal();"
    d="m11.596.782 2.122 2.122L9.12 7.499l4.597 4.597-2.122 2.122L7 9.62l-4.595 4.597-2.122-2.122L4.878 7.5.282 2.904 2.404.782l4.595 4.596L11.596.782Z" 
    fill="#69707D" fill-rule="evenodd"/>
  </svg>
</div>

对应的CSS： #

.parent-container {
  display: flex;
  justify-content: flex-end; /* 把内部元素推到右侧 */
}

#cross-icon {
  fill: black;
  /* 删掉原来的position: absolute、margin、top属性 */
}

如果父容器还有其他元素，也可以给SVG单独加margin-left: auto，同样能把它挤到右侧：

.parent-container {
  display: flex;
}

svg {
  margin-left: auto;
}

解决方案二：用绝对定位实现右对齐 #

如果你一定要用绝对定位，需要给父容器设置定位上下文，然后给SVG（不是path）设置右侧偏移：

CSS代码： #

.parent-container {
  position: relative; /* 必须设置，让内部绝对定位元素以它为基准 */
  height: 40px; /* 按需设置父容器高度，否则可能看不到SVG */
}

svg {
  position: absolute;
  right: 0; /* 贴紧父容器右侧 */
  top: 0; /* 垂直位置按需调整，比如top: 50%; transform: translateY(-50%); 可以垂直居中 */
}

#cross-icon {
  fill: black;
}

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