时间戳

首页 > 解决方案 > 相对于内联元素的绝对位置

css - 相对于内联元素的绝对位置

问题描述

我试图在 div 中将一行文本居中并在居中文本之后放置一个 SVG，但我不希望 SVG 的宽度被考虑用于居中目的。
实现这一点的最简单方法是在文本之前添加一个不可见的 SVG，但这需要不必要的 SVG 复制。
似乎我应该能够通过绝对定位来实现这一点，但是默认位置稍微偏离并设置顶部/底部/左侧/右侧相对于正文而不是文本的位置。

如何在页面上不需要多个 SVG 元素的情况下实现下面绿色示例中的定位？

.parent {
  width: 150px;
  border: solid;
  text-align: center;
}
.correct {
  background: rgb(183, 225, 205);
}
.incorrect {
  background: rgb(244, 199, 195);
}
svg {
  height: 12px;
}
<div class="parent">
<span>Centered</span>
</div>

<div class="parent incorrect">
<span>Centered</span>
<svg viewBox="0 0 2 2">
<path d="M0.43 1.77L1.2 1 0.43 0.24 0.67 0l1 1-1 1z"></path>
</svg>
</div>

<div class="parent correct">
<svg viewBox="0 0 2 2" style="visibility: hidden">
<path d="M0.43 1.77L1.2 1 0.43 0.24 0.67 0l1 1-1 1z"></path>
</svg>
<span>Centered</span>
<svg viewBox="0 0 2 2">
<path d="M0.43 1.77L1.2 1 0.43 0.24 0.67 0l1 1-1 1z"></path>
</svg>
</div>

<div class="parent incorrect">
<span>Centered</span>
<svg viewBox="0 0 2 2" style="position: absolute">
<path d="M0.43 1.77L1.2 1 0.43 0.24 0.67 0l1 1-1 1z"></path>
</svg>
</div>

标签： css

解决方案

我知道您不想使用position: absolute;，但是，这似乎是忽略svg. 

.parent {
  width: 150px;
  border: solid;
  text-align: center;
  position: relative;
  padding:5px;
}
.correct {
  background: rgb(183, 225, 205);
}
.incorrect {
  background: rgb(244, 199, 195);
}
svg {
  height: 12px;
  position: absolute;
  top: 0px;
  padding-top:7px;
  padding-left:5px;
}
<div class="parent incorrect">
    <span>Centered</span>
</div>

<div class="parent correct">
    <span>Centered</span>
    <svg viewBox="0 0 2 2">
        <path d="M0.43 1.77L1.2 1 0.43 0.24 0.67 0l1 1-1 1z"></path>
    </svg>
</div>

推荐阅读