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

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/
Align both Eye and Text to flex-start
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 2

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 3

I found the solution without altering line-height property of the text.
Same like oluckyman's answer before, align both Eye and Text to flex-start.
Add hidden pseudo-element on Eye which resembles the height of the Text.
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 4

A lot of the answers here are going to be depending on your situation - the current (and wrongly) accepted answer would only work if your designer does not mind that you butcher the line height which is no good for most.
If you want to do this ultimately your goal is to get the icons container to be the same height as one line of text and then align the icon within this container to be centered.
A decent method of doing this is by duplicating a bit of text with the same css as the text you want to be centered against then hiding it, This will ensure that the container is now the same height as the text. Now you simply center align the icon.
Heres an example in react (the css is the same)
export function CheckmarkListItem({ point }: Iprops) {
return (
<Div>
<IconContainer>
<SvgWrap size={20} mixin={svgMix}>
<Checkmark />
</SvgWrap>
<HiddenDiv>
<Typo tag="p">Mock text</Typo>
</HiddenDiv>
</IconContainer>
<PointDiv>
<Typo tag="p">{point}</Typo>
</PointDiv>
</Div>
);
}
const Div = styled.div`
display: flex;
text-align: left;
gap: 15px;
${(props) => props.theme.breakpoints.up.md} {
gap: 30px;
}
align-items: flex-start;
`;
const PointDiv = styled.div``;
const IconContainer = styled.div`
display: flex;
align-items: center;
`;
const svgMix = css`
margin: 0;
`;
const HiddenDiv = styled.div`
visibility: hidden;
width: 0;
`;

Answer 5

.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 6

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