Dynamically set marker for vertically centered content
I have a rather strange situation in my layout. As I said below, the design shows text that is aligned to two single lines and one line. I have set the markup for the one-line texts to align. When there is double line text I need to manually set the margin. Is it possible to set this without using a javascript function? can it be a cone using pure CSS without having specific margins for each type of text.
My div structure looks like this.
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x"></i>
<span>Ring</span>
</div>
source to share
Yes, quite simple using line-height and line-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 to define space for text to be two lines high. Small text elements still span two lines, but only fill the text with text.
Alternatively, you can give the entire .operation
minimum height, but I prefer not to, as mobile response gets more complex the more you define heights.
source to share
With CSS Flexbox, you don't need any particular height, it will align anyway using margin: auto 0
, and it doesn't matter how many lines you have.
.wrapper {
display: flex;
}
.operation {
display: flex;
flex-direction: column;
}
.operation .itemText {
margin: auto 0;
}
/* styles added for this demo */
.wrapper { margin-bottom: 20px; }
.operation { padding: 10px; }
<div class="wrapper">
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring</span>
</div>
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring<br>2 lines</span>
</div>
</div>
<div class="wrapper">
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring<br>3<br>lines</span>
</div>
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring</span>
</div>
</div>
source to share