How to align center text that next to a span?

Question

I am trying to put "per month" vertical-align to the price "$29" just like the picture.You can help me fix my code or give me a new way that is better for me.

This is what I want.

This is what I had

here is my HTML code.

  <div class="deal">
          <span class="price">&dollar;29</span>
          <span class="period">per month</span>
        </div>

and my css.

.price {
  font-size: 50px;
}
.monthly {
  color: #d0d3d4;
  vertical-align: middle;
  display: inline-block;
}

score 2 · Accepted Answer · answered Nov 14 '21 at 07:29

2

CSS

.deal{
  display:flex;
  align-items:center;
}
.period{
  margin-left:0.5rem;
}

jsfiddle

answered Nov 14 '21 at 07:29

Todor Markov

507
5
12

I tried your code and it work, but when I delete margin-left:0.5rem; it still works perfectly. Can you explain what does margin-left:0.5rem do? – Đức Seven Nov 14 '21 at 07:35
1

Becouse stay too close each to other thats why i write this magin-left:0,5rem; – Todor Markov Nov 14 '21 at 07:37

score 2 · Answer 2 · answered Nov 14 '21 at 07:31

2

.deal {
display: inline-flex;
align-items: center;
}

answered Nov 14 '21 at 07:31

Hamed Yaghooti

97
4

How to align center text that next to a span?

2 Answers2