How to center a span in a div
<p>i have already tried many thing to center a span Element (which contains couple of DIVs) in a wrapper DIV (in this case the soccerField DIV)... </p>

<p>HTML structure looks like this:</p>

<pre><code>&lt;div id="soccerField"&gt;
    &lt;span id="defendLine"&gt;
        &lt;div&gt;player 1&lt;/div&gt;
        &lt;div&gt;player 2&lt;/div&gt;
        &lt;div&gt;player 3&lt;/div&gt;
        &lt;div&gt;player 4&lt;/div&gt;
    &lt;/span&gt;
&lt;div&gt;
</code></pre>

<p>CSS looks like this:</p>

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

#defendLine{
 display: inline-block;  
}
</code></pre>

<p>at the moment it looks like:
<a href="https://i.stack.imgur.com/f7Beg.png" rel="noreferrer"><img src="https://i.stack.imgur.com/f7Beg.png" alt="enter image description here"></a></p>

<p>at the end it should looks like:
<a href="https://i.stack.imgur.com/gY2bF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gY2bF.png" alt="enter image description here"></a></p>

<p>but this result i only get when I am using this code:</p>

<pre><code>#defendLine{
  position: absolute;
  left:59px
}
</code></pre>

<p>but this is not the right way I think becasue when I have only 3 players or 5 players at my DefendLine, i also have to give some "left: X" values. But i want to make it dynamically. >> doesnt matter how much players, always center the span element, independentley how much players my  includes.</p>

<p>I have already check these articles which helps other, but in this case. I couldnt help myself :( </p>

<p><a href="https://stackoverflow.com/questions/14821277/css-how-to-center-a-div-horizontally">CSS How to center a div horizontally</a>
<a href="https://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css">How do you easily horizontally center a &lt;div&gt; using CSS?</a></p>

<p>I would be really happy if anyone could give me a hint!</p>

<p>Edit:</p>

<p>I have created a fiddle, i tried all solutions out. I think something else is the reason for my problem :(</p>

<p><a href="https://jsfiddle.net/rztad75y/2/" rel="noreferrer">https://jsfiddle.net/rztad75y/2/</a></p>