Center align legend text and circle

Question

I need to draw a horizontal legend for my graph, but not sure how I can center align it as well as keeping it on same distance from one an other.

I can draw the group for each item containing

<g class="legend">
    <g class="item">
        <circle r="2" ... />
        <text>passed</text>
    </g>
    ...
</g>

as the text is of dynamic width how I can position it so it has same distance ie red lines and the whole g.legend at the center of the svg ie the blue lines.

...

Answer 1

 .legend{ /* Container (You can use text-align: center instead of flex in you want) */ display: flex; justify-content:center; }.legend::before{ /* The line */ display: block; border-bottom: 2px solid gray; left: 0; top: calc( 1rem + 2px ); /* Line height + Border thickness */ position: absolute; width: 100%; content: ''; }.legend div{ /* Each legend item */ margin: 0 10px; padding: 2px; display: inline-block; background: white; z-index: 1; }

 <div class="legend"> <div>• Legend 1</div> <div>• Legend 2</div> <div>• Legend 3</div> </div>

You can make use of the CSS ::before pseudo-selector to achieve this. Please comment if you have any queries. I cant