Question 268490 in Html Question posted in
Some basic documentation can be found here.

Html – 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?

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search