title: How to center a span in a div
body: <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>