How to center a span in a div - html

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%);

Answer 4

You were on the right track. You can center elements using 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>

Answer 5

Use display: flex for the parent div, and justify-content: center to center items inside on the horizontal axis, and align-items: center to center them vertically.
Flex boxes are a real helper in cases like this.