Align icon vertically to the center of the first line of text

Question

Here are the eyes with align-items: center property. They are OK for one-line text and FAIL for multiline text:

Here are the eyes with align-items: baseline (or flex-start ). They are better for multiline text but not ideal for all of them because I want to align the eye to the center of first line of the text:

What I'm trying to achieve is this:

See how the eye image is centered at the first line of the text?

Is it possible to do it elegantly with flexbox properties, without using padding or margin?

(This is a simplified example. In the real problem I don't want to introduce padding because it will affect other items.)

Here is jsfiddle to play with: http://jsfiddle.net/sqp1wdap/

Answer 1

I found the solution without altering line-height property of the text.

1. Same like oluckyman's answer before, align both Eye and Text to flex-start .
2. Add hidden pseudo-element on Eye which resembles the height of the Text.
3. Use center alignment for the Eye which will aligns the Eye itself and the pseudo-element we've created.

Here is a link to JSFiddle and summary of what I did:

.LegendItem {
  min-height: $itemHeight;
  font-size: $fontSize;
  margin: 2px 0;

  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;  // <-- Change this
}

.LegendItem_Eye {
  width: $slotWidth;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #bbb;
}
.LegendItem_Eye::before {   // <-- Add this
  content: "A";
  width: 0px;
  visibility: hidden;
}

.LegendItem_Text {
  padding: 0 3px;
  flex: 1;
  background: #eaa;         // <-- Remove align-self
}

And it will look like this .

Answer 2

I found the solution: http://jsfiddle.net/sqp1wdap/3/

1. Align both Eye and Text to flex-start
2. Make line-height for text same as Eye height

Here is the edited code:

.LegendItem_Eye {
  width: $slotWidth;
  display: flex;
  justify-content: center;
  align-items: flex-start; // ← edit (1)
  background: #eee;
}
.LegendItem_Text {
  padding: 0 3px;
  flex: 1;
  align-self: flex-start; // ← edit (1)
  background: #eaa;
  line-height: $fontSize; // ← edit (2)
}

And here is how it looks like:

Answer 3

I am not sure whether there is an elegant way to do it with flex but i can provide you a crack for the same and that will not affect any-other elements as far as i guess:

you can add custom styling for font-awesome.css

.fa{
    position: absolute;
    top: 0;
    left: 0;
    text-align:center;
    padding:3px;
}

---

And for your custom style you can do this:

.LegendItem_Eye {
  width: $slotWidth;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  position: relative; /* Added this new rule */
}

I know this is not the proper solution but you can give this a try unless it harms other elements. :)

jSFiddle

Answer 4

.LegendItem_Eye {
  width: $slotWidth; // keep width
  float:left; // float left
  line-height:1.3; // define line height
} 

That should be all you need. Demo.

Answer 5

Of course, if the icon height equals the line height it will be 'aligned' to the first line.

Normally, those two things will be different. You can't actually change the line height or the icon height without impacting the visual design.

So the solution for this would be to wrap the icon with a flex container which height equals the text line-height. This container will do the vertical centering of the icon. If the icon is larger than the container then it will just overflow from top and bottom.

So in your example (I'm just exaggerating the height for clarity, you could also try with very smalls values, like 8px and see how it works in both scenarios)

.LegendItem_Eye {
  width: $slotWidth;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  height: 100px; /* <-- set this */
}

.LegendItem_Text {
  padding: 0 3px;
  flex: 1;
  background: #eaa;
  line-height: 100px; /* <-- equal to this, no need to set this, just use right value above */
}

Notice that you don't actually need to change the text line-height, just set the eye container height to whatever that value should be.

Fiddle working for cases in which line-height is bigger than icon: http://jsfiddle.net/ofdwemva/

Fiddle working for cases in which line-height is smaller than icon: http://jsfiddle.net/ofdwemva/1/

Answer 6

(July 2017) While the solution (and other answers) does the trick, they all missed the most straightforward and easy to modify answer.

First add * { outline: 1px dashed } to your original, unmodified Fiddle and you can almost see the solution staring you in the face as element .LegendItem_Eye takes op the full height of the parent container.

As the eye -icon is square you can simply add height: $slotWidth to .LegendItem_Eye and flex does the rest.

Because the icon has now been confined to a little square, flex simply has no room to either center it in its container and displays it at the start as per parent rule justify-content: flex-start .

The Fiddle .

Addition

Actually, the icon is still centered in .LegendItem_Eye as it has $slotWidth = $itemHeight = $fontSize * 1.3; to move in, but we confined it to a $slotWidth square instead of the full parent height.

logic

1. default for flexed items is align-self: stretch
2. parent .LegendItem has rule align-items: stretch
3. parent .LegendItem has rule justify-content: flex-start
4. child align-self has precedence over parent align-items
5. child .LegendItem_Eye has no height value set
6. child .LegendItem_Eye has rule align-items: center
7. eye -icon is a child of child .LegendItem_Eye
8. eye -icon is a font character, just like any other character in the alphabet, so it only takes up given $fontSize space and takes fa fa-eye font settings

resulting in

9. child .LegendItem_Eye grows to parent height because of 1, 2, 4 and 5
10. eye -icon is centered in .LegendItem_Eye because of 6, 7 and 9

solution

11. constrain height of child .LegendItem_Eye with value $slotWidth

    • correcting 5
    • limiting the growth of 9
    • and cancelling the visual effect of 10

12. because of 3 child of .LegendItem_Eye eye -icon will move up

All rules 1 to 8 (except rule 5) are still in effect, just boxed in by $slotWidth