如何将div放在div中心

Question

我已经尝试过很多东西来将一个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/

Answer 1

这是一个JSFiddle解决方案,我将解释如何实现它的一些关键:

1)我用 flexbox

#field {
  /* I skip properties that do not change */
  display: flex;
  justify-content: center; /* here we just put the only child div to the center */
}

我改#defendLine到.defendLineSE刚刚以确保它不会在其他地方覆盖.(这就是为什么你的代码无法工作 - 只需改回来)

.defendLineSE {
  width: 400px;
  display: flex;
  justify-content: space-between;
}

2)注意我们需要有宽度.这个宽度是#defendie-s宽度和它们之间的空格的总和(justify-content: space-between;)

3)我删除position: absolute了你的全部#defendie因为它们破坏了我们的flexbox(你也不需要使用left: 387px;)

tip1:我相信你会发现这个flexbox-cheatsheet很有用

提示2:因为我们使用justify-content: space-between;你可能不需要像.firstColumn其他类似的类

TIP3:改变#defendLine到.anyLine,删除width: 400px;,添加margin到您的.defendie-s -你有任何线路的通用解决方案与任意数量的球员

Answer 2

使用<span>标签是一种不好的做法。相反，将其更改为<div>如下所示：

超文本标记语言

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

CSS

#defendLine{
 width: 90%;
 margin: 0 auto;  
}

如果您想将 div 本身的内容居中，请进行编辑text-align:center，设置或仅使用 Flexbox：

display:flex;
justify-content: center;
align-items: center;

更多信息可以在这里找到： https: //css-tricks.com/snippets/css/a-guide-to-flexbox/