I need to align three spans in CSS, one on the right, one in the middle and the other on the left. How do I do it?

Question

I'm creating a one-line bar that has background-color: black;, for an ecommerce. This div has three sentences, that I organized as spans in the HTML. I must make sure that these sentences are organized one on the right, one on the left, another one in the middle.

span {
  display: inline-block;
}

.barraServizioClienti {
  width: 100%;
  height: 27px;
  padding: 4px 15px 4px;
  background-color: #121212;
}

.customerServiceItems {
  vertical-align: middle;
}

#spedizioniGratis {
  text-align: center;
}

#trovaci {
  float: right;
}

#servizioClienti a,
#spedizioniGratis,
#trovaci a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 100;
  color: #ffffff;
}

<div class="barraServizioClienti">
  <p>
    <span id="servizioClienti"><a href="home.html">Servizio Clienti</a></span>
    <span id="spedizioniGratis">Spedizioni e resi gratuiti</span>
    <span id="trovaci"><a href="home.html">Trova il negozio più vicino</a></span>
  </p>
</div>

Answer 1

Forget floats, use flexbox with p {display:flex;justify-content: space-between;}:

.barraServizioClienti {
  width: 100%;
  height: 27px;
  padding: 4px 15px 4px;
  background-color: #121212;
}

.customerServiceItems {
  vertical-align: middle;
}

#spedizioniGratis {
  text-align: center;
}

#servizioClienti a,
#spedizioniGratis,
#trovaci a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 100;
  color: #ffffff;
}

p {display:flex;justify-content: space-between;}

<div class="barraServizioClienti">
  <p>
    <span id="servizioClienti"><a href="home.html">Servizio Clienti</a></span>
    <span id="spedizioniGratis">Spedizioni e resi gratuiti</span>
    <span id="trovaci"><a href="home.html">Trova il negozio più vicino</a></span>
  </p>
</div>

Answer 2

In your CSS, where you have called the span classes by the IDs, try adding these lines of code and see,

#servizioClienti {
  text-align: left;
  float: left;
}

#spedizioniGratis {
  text-align: center;
}

#trovaci {
  text-align: right;
}

If that didn't work try wrapping the all the spans around a div container and check again

Answer 3

Try this,

HTML: I have added a container class

<div class="container barraServizioClienti">
  <p>
    <span id="servizioClienti"><a href="home.html">Servizio Clienti</a></span>
    <span id="spedizioniGratis">Spedizioni e resi gratuiti</span>
    <span id="trovaci"><a href="home.html">Trova il negozio più vicino</a></span>
  </p>
</div>

CSS:

.barraServizioClienti {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#servizioClienti {
    display: flex;
    justify-content: left;
  }
  
  #spedizioniGratis {
    display: flex;
    justify-content: center;
  }
  
  #trovaci {
    display: flex;
    justify-content: right;
  }