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: 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: