Dynamically set margin to vertical centered content

Question

I've got rather a confusing situation in my layout. As I have attached below, the design shows text which a double lined and single lined. I set a margin to single lined texts so that it gets aligned. When there is a double lined text, I have to manually set the margin. Is it possible to set this without wrting a javascript function? could it be cone using pure CSS without having specific margins for each text type.

My div structure is as following.

<div class="operation text-center">
    <i class="icon fw fw-ringing fw-3x"></i>
    <span>Ring</span>
</div>

Answer 1

Yes, rather simple too using line-height and height:

.operation .itemText{
    line-height: 15px;
    height: 30px; /* at least twice the line-height */
}

<div class="operation text-center">
    <i class="icon fw fw-ringing fw-3x"></i>
    <span class="itemText">Ring</span>
</div>

The trick is defining a space for the text to the height of two lines. The small worded items still take up two lines, but fill only one with text.

Alternatively, you could give the whole .operation a min-height, but I prefer not to, as mobile responsiveness gets trickier the more you define heights.