cod*_*ker 5 html css centering
我有一个带有一定数量跨度的 div，它的宽度可能相等，也可能不相等。我知道我可以text-align: center用来使 div 中的所有内容居中。但是，我想选择一个特定的跨度，并将其指定为真正的中心，而不是中心是跨度序列的中点。
我必须模拟这种效果的一个想法是：我想要的中间元素在其左右两侧有两个容器；左边的将是右对齐的，反之亦然。这些容器将保存 div 中的其他内容。如果我可以让这两个容器以等量填充剩余空间，这将具有居中中间元素同时保持左右内容与中心对齐的效果。基本上，这需要将两个容器的宽度设置为 div 中剩余空间的一半。（我不想改变中间 div 的大小。）这可能只用 CSS 吗？
示例：有 4 个跨度，如何将跨度 2 指定为真正的中心？
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>这可以使用 Flexbox 来完成。您可以display:flex;在 上使用div，并flex-grow:1;在 上使用2nd span。这样你就可以用这个跨度覆盖整个 div。
由于第一个和第三个跨度的宽度已经相等，因此第二个跨度将位于死点。然后使用flex-basis第二次来获得所需的宽度。
div.container{
width: 500px;
padding: 4px;
border: 1px dotted black;
}
div.row{
display:flex;
align-items:center;
justify-content:center;
}
span {
display: inline-block;
width: 70px;
text-align: center;
margin: 4px;
box-sizing: border-box;
border: 1px dotted black;
transform:translate(50%,0);
}
#b {
}<html>
<head></head>
<body>
<div class='container'>
<div class="row">
<span id="a">1</span>
<span id="b">2</span>
<span id="c">3</span>
<span id="d">4</span>
</div>
</div>
</body>
</html>