Question

我正在尝试在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>

Answer 1

我知道您不想使用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>

Answer 2

您可以设置否定的margin-right甚至使用svg作为span:after背景。请参阅最后两个示例：

.parent {
  width: 150px;
  border: solid;
  text-align: center;
}

.correct {
  background: rgb(183, 225, 205);
}

.incorrect {
  background: rgb(244, 199, 195);
}

svg {
  height: 12px;
}

.bg span {
  display: inline-block;
  position: relative;
}

.bg span:after {
  content: '';
  position: absolute;
  top: 2px;
  right: -15px;
  width: 12px;
  height: 12px;
  background: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%202%202%22%3E%3Cpath%20d%3D%22M0.43%201.77L1.2%201%200.43%200.24%200.67%200l1%201-1%201z%22%3E%3C/path%3E%3C/svg%3E) no-repeat 50% 50% / 100%
}

<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 margin correct">
  <span>Centered</span>
  <svg viewBox="0 0 2 2" style="margin-right:-14px">
<path d="M0.43 1.77L1.2 1 0.43 0.24 0.67 0l1 1-1 1z"></path>
</svg>
</div>

<div class="parent bg correct">
  <span>Centered</span>
</div>

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

2 个答案: