Vertically center strings with different sizes on the same line

[PloMar]

I have 3 strings (with different sizes) next to each other on the same line.

Some Big text Here Middle text Other string, smaller

How can I make to align the last two strings so that they are vertically centered relative to the first string?

Hi,
By setting vertical-align and line-height , you can center vertically the strings on the same line.
Example:

Code: Select all

<style>
.text_line {
  background: #cbcbfe;
  line-height: 60px;
}
.text1 {
  font-size: 225%;
  vertical-align: middle;
}
.text2 {
  background: #fefebe;
  font-size: 125%;
  color: #ee0100;
  vertical-align: middle;
}
.text3 {
  background: #fefefe;
  font-size: 88%;
  color: #00be00;
  vertical-align: middle;
}
</style>

<div class="text_line">
  <span class="text1">Some Big text</span> <span class="text2">Here Middle text</span> <span class="text3">Other string, smaller</span>
</div>

Demo:

Some Big text Here Middle text Other string, smaller