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>

This may help- http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css — Rohith K P, May 04 '17 at 07:57
@Mendax: That aligns 1 line of text in the center, TS asks how to handle both single and double lined situation mixed — Martijn, May 04 '17 at 07:58
PS: That brush isn't a very good choice for 'clear password' — Martijn, May 04 '17 at 08:00

Martijn · Accepted Answer · 2017-05-04T08:07:21.823

4

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.

edited May 04 '17 at 08:07

answered May 04 '17 at 07:54

Martijn

14,522
4
29
61

It does if you make the height 3 times the line-height. – Martijn May 04 '17 at 09:28
@Martijn Cool – Rohith K P May 04 '17 at 09:42

Ason · Answer 2 · 2017-05-04T09:06:43.540

With CSS Flexbox you don't need any specific height, it will align anyway, using margin: auto 0, and it does not 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>

Dynamically set margin to vertical centered content

2 Answers2