How to center a span in a div

Question

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)...

HTML structure looks like this:

<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 looks like this:

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

#defendLine{
 display: inline-block;  
}

at the moment it looks like:

at the end it should looks like:

but this result i only get when I am using this code:

#defendLine{
  position: absolute;
  left:59px
}

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.

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

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

I would be really happy if anyone could give me a hint!

Edit:

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

https://jsfiddle.net/rztad75y/2/

Answer 1

Here is a JSFiddle with the solution and I'll explain some keys of how to achieve it:

1) I use 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 */
}

I changed #defendLine to .defendLineSE just to make sure that it's not overriden elsewhere. (that's why your code could not work - just change that back)

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

2) Note that we need to have width. This width is a sum of #defendie-s width and spaces between them (justify-content: space-between;)

3) I removed all position: absolute in your #defendie because they destroy our flexbox (you don't need to use left: 387px; as well)

tip1: I believe you will find usefull this flexbox-cheatsheet

tip2: Since we use justify-content: space-between; you may not need such classes like .firstColumn and others

tip3: change #defendLine to .anyLine, remove width: 400px;, add margin to your .defendie-s - you'll have universal solution for any line with any number of players

Answer 2

using a <span> tag is a bad practice. instead, change it to a <div> like this:

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;  
}

Edit if you'd like to center the content of the div itself, set text-align:center or simply use flexbox:

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

more info could be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

You could use transform: translateX() like this..

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

#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%;
}

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

It works vertically as well..

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