Is there a way to align text that has the line-height
property ?
border-box
doesn't seem to help, since css is counting the lineheight as part of the actual font. I tried using negative offsets, but those don't seem to do much.
I am currently using flexbox
for all of the layout.
The layout
+-----------------------------------------------------------------------------------------------------------+
| |
| +-----------------------------------+ |
| | | |
| | Title | |
| | | |
| +-----------------------------------+ |
| |
| +-------------------------------------------------+ +-----------------------------------------------+ |
| | | | | |
| | Image | | Text | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | +-----------------------------------------------+ |
| | | |
| | | |
| | | +------------+ |
| | | | button | |
| +-------------------------------------------------+ +------------+ |
| |
| |
+-----------------------------------------------------------------------------------------------------------+
The offset
Css (EmotionJs for React)
<div css={{
display: 'flex',
flexWrap: 'wrap',
}}>
<Img
customCss={{
backgroundPosition: ['center', 'bottom'],
flexGrow: 1,
}}
/>
<div
css={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'space-between',
}}>
<div
css={{
lineHeight: '1.5em',
}}>
{text}
</div>
<a>Button</a>
</div>
</div>
Solution :
Found a selector that can remove line-height from the first line