html如何定义一个div整体居中,html – 如何在div中居中

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

HTML结构如下所示：

player 1

player 2

player 3

player 4

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”值.但我想动态地制作它. >>并不重要的是多少球员,总是以跨度元素为中心,独立于我包括多少球员.

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

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

编辑：

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