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

Html – 2 span tags need the text in the second span vertically centered to the first

I want to have is the text "$29" that is in big text and one colour, and after that the text, "per month" in a smaller font different colour but is aligned vertically so it appears to be in the middle of the "$29". But nothing I tried worked. I have:

Hoping to get the text per month centered to the "$29" text.

.per {
  color: hsl(71, 73%, 54%);
  margin: auto;
  text-align: center;
}

.whiteMoney {
  color: red;
  font-size: 20pt;
  font-weight: 700;
  vertical-align: center;
}
<p>
  <span class="whiteMoney">$29</span>
  <span class="per">per month<span>
</p>
Tags:

2

Answers


  1. 0

    One nice, modern way to do this is with flex layout:

    p {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: black; /* for demo purposes */
}

.per {
  color:hsl(71, 73%, 54%);
}

.whiteMoney {
  color: white;
  font-size: 20pt;
  font-weight:700;
}
    <p>
<span class="whiteMoney">$29</span> 
<span class="per">per month<span>
</p>

    In case I’ve misunderstood and you want the items side by side but their middles to align, you could try this instead:

    p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: black; /* for demo purposes */
}

.per {
  color:hsl(71, 73%, 54%);
}

.whiteMoney {
  color: white;
  font-size: 20pt;
  font-weight:700;
}
    <p>
<span class="whiteMoney">$29</span> 
<span class="per">per month<span>
</p>

    You could add some bottom padding to .per if you don’t like the visual effect, say padding-bottom: 3px.

    Login or Signup to reply.
  2. 0

    set vertical-align:middle, center doesn’t make sense for property vertical-align.

    .per{
  color:hsl(71, 73%, 54%);
  margin: auto;
  text-align: center;
}

.whiteMoney{
  color: red;
  font-size: 20pt;
  font-weight:700;
  vertical-align:middle;
}
    <p>
<span class="whiteMoney">$29</span> 
<span class="per">per month<span>
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search