Absolute positioning

by AltayH

HTML

<div class="parent">
<span>Centered</span>
</div>

<div class="parent">
<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">
<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">
<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>
-->
<div class="parent" style="position: relative">
<span>Centered</span>
<svg viewBox="0 0 2 2" style="position: absolute; padding-top: 2px; padding-left: 4px">
<path d="M0.43 1.77L1.2 1 0.43 0.24 0.67 0l1 1-1 1z"></path>
</svg>
</div>

CSS

.parent {
  width: 150px;
  border: solid;
  text-align: center;
}
svg {
  height: 12px;
}