I have a div containing multiple spans with varying widths. While I know that using text-align: center can center all content within the div, my goal is to specifically designate one span as the true center, rather than having the center be the average of all spans.
One method I considered to achieve this effect involves creating two containers, each positioned alongside the desired middle element - one on the left and one on the right. The left container would align to the right, and vice versa. These containers would hold the other spans in the div. If I could make these containers fill up the remaining space equally, it would effectively center the middle span while maintaining alignment with the center for the others. Essentially, this entails setting the width of the two containers to precisely half of the leftover space in the div (without altering the size of the central span). Is it feasible to accomplish this using only CSS?
For instance, how do I specify span 2 as the true center when there are 4 spans?
div {
width: 500px;
padding: 4px;
border: 1px dotted black;
}
span {
display: inline-block;
width: 100px;
text-align: center;
margin: 4px;
box-sizing: border-box;
border: 1px dotted black;
}
#b {
/* ??? */
}<div>
<span id="a">1</span>
<span id="b">2</span>
<span id="c">3</span>
<span id="d">4</span>
</div>