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”值。但我想动态地制作它。＆GT;＆GT;无论玩家多少，总是将span元素集中在一起，独立于我所包含的玩家数量。

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

CSS How to center a div horizontally How do you easily horizontally center a <div> using CSS?

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

编辑：

我创造了一个小提琴，我尝试了所有解决方案。我认为其他原因是我的问题所在：（

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

有用

tip2：由于我们使用justify-content: space-between;，您可能不需要.firstColumn等其他类

tip3：将#defendLine更改为.anyLine，删除width: 400px;，将margin添加到.defendie - s - 您将拥有任何行的通用解决方案任意数量的球员

Answer 2

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

<强> HTML

<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/

Answer 3

您可以像这样使用transform: translateX() ..

position: absolute;
left: 50%;
transform: translateX(-50%);

＆＃13;

#field{
padding: 0;
min-width: 250px;
min-height: 1000px;
max-width: 800px;
position: relative;
text-align: center
}

#defendLine{
 display: flex;
  position: absolute;
  top: 0%; left: 50%;
  transform: translateX(-50%);

}
#defendLine div {
 display: flex;
 flex-basis: 20%;
}

＆＃13;

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

＆＃13;

它也垂直工作..

  top: 50%; left: 50%;
  transform: translateY(-50%) translateX(-50%);

Answer 4

您在正确的轨道上。您可以使用text-align: center

将元素居中

#field{
padding: 0%;
min-width: 250px;
min-height: 1000px;
max-width: 800px;
position: relative;
/*text-align: center*/
}

#defendLine{
 text-align: center;
 display: block;/* This is a span, you have to make it a block*/
}

#defendLine div{
 display: inline-block;  
}

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

如何将div放在div中心

4 个答案: