小编nbg*_*g15的帖子

我已经尝试过很多东西来将一个span元素(包含几个DIV)集中在一个包装器DIV中(在本例中是soccerField DIV)...

HTML结构如下所示:

<div id="soccerField">
    <span id="defendLine">
        <div>player 1</div>
        <div>player 2</div>
        <div>player 3</div>
        <div>player 4</div>
    </span>
<div>

CSS看起来像这样:

#field{
padding: 0%;
min-width: 250px;
min-height: 1000px;
max-width: 800px;
position: relative;
text-align: center
}

#defendLine{
 display: inline-block;  
}

目前它看起来像:

最后它应该看起来像:

但是这个结果我只有在使用这段代码时才会得到:

#defendLine{
  position: absolute;
  left:59px
}

但这不是正确的方式我觉得因为当我的DefendLine只有3名球员或5名球员时,我还必须给出一些"左:X"值.但我想动态地制作它.>>无论玩家多少,总是以跨度元素为中心,独立于我包含多少玩家.

我已经检查了这些有助于其他的文章,但在这种情况下.我无法帮助自己:(

CSS如何水平居中div 如何使用CSS轻松地水平居中<div>？

如果有人能给我一个提示,我会很高兴的!

编辑:

我创造了一个小提琴,我尝试了所有解决方案.我觉得别的是我问题的原因:(

https://jsfiddle.net/rztad75y/2/