Vertically center strings with different sizes on the same line

PloMar
Posts: 48

Vertically center strings with different sizes on the same line

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?

MarPlo
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

Similar Topics